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图 以 培养 拉 能 型 创新 人 才 为 和 目标， 设置 丰富 的 版 块 ， 合理 安排 全 文 ， 
突出 实用 性 和 可 操作 性 。 

国 以 工作 过 程 为 导 回 ， 全 面 展示 案例 实施 的 全 过 程 ， 提 炼 技术 要 点 ， 
即 学 即 用 ， 面 向 就 业 。 

四 以 强化 实际 操作 技能 为 主线 ， 符 疑 解 惑 ， 解 决 工作 实践 中 的 常见 
问题 。 
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内 容 简介 


这 是 一 本 以 “应 用 实例 和 综合 实战 案例 ”的 形式 编写 网 页 设计 技术 的 教材 。 本 书 的 内 容 分 为 四 个 部 分 ， 
包括 HTML5、CSS3、JavaScript 和 Bootstrap。 本 书 内 容 的 组 织 是 以 介绍 Web 前 端 网 页 设计 技术 展开 的 ， 
有 具体 内 容 包括 网 页 设计 的 文档 结构 、 文 本 、 图 像 ， 用 HIMLS 创建 超 链 接 、 表 格 ， 使 用 表单 ， 用 CSS3 设 
置 表格 和 表单 的 样式 、 美 化 图 片 、 背 景 和 边框 ， 讲 述 JavaScript 基本 语法 、 对 象 编 程 、 应 用 HTML5+CSS3 
和 JavaScript 的 搭配 应 用 等 网 页 设计 的 方法 和 技巧 ， 最 后 使 用 Bootstrap 框架 组 件 、 插 件 来 快速 设计 页 面 。 
本 书 贴切 实际 ， 结 构 合 理 ， 内 容 丰 富 ， 操 作 方 便 。 

本 书 作为 Web 前 端 网 页 设计 技术 的 入 门类 教材 ， 既 可 以 作为 高 等 职业 教育 计算 机 及 相关 专业 的 教材 ， 
也 可 作为 Web 前 端 技术 的 各 种 培训 班 的 培训 教材 ， 还 可 用 于 读者 自学 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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六 党 讨 好 丽 


外 洱 六 崇洋 


从 书 打 


能 否 服 务 于 社会 、 促 进 就 业 和 提高 社会 对 毕业 生 的 满意 度 ， 是 衡量 高 等 职业 教育 是 否 
成 功 的 重要 指标 。 坚 持 “ 以 服务 为 宗旨 ， 以 就 业 为 导向 ， 走 产 学 结合 发 展 的 道路 ”体现 了 
高 等 职业 教育 的 本 质 ， 是 其 适应 社会 发 展 的 必然 选择 。 

为 了 提高 高 职 院 校 的 教学 质量 ， 培 养 符合 社会 需求 的 高 素质 人 才 ， 我 们 组 织 全 国 高 等 
只 业 院 校 的 专家 、 教 授 组 成 了 “高 职高 专 工作 过 程 。 立 体 化 创新 规划 教材 一 计算 机 系 
列 ” 编 审 委员 会 ， 全 面 研讨 人 才 培养 方案 ， 并 结合 当前 高 职 教育 的 实际 情况 ， 推 出 了 这 去 
“高 职高 专 工作 过 程 。 立 体 化 创新 规划 教材 一 一 计算 机 系列 ”丛书 ， 打 破 了 传统 的 高 职 教材 
以 学 科 体 系 为 中 心 ， 讲 述 大 量 理论 知 识 再 配 以 实例 的 编写 模式 ， 突 出 应 用 性 、 实 践 性 。 一 
方面 ， 强 调 课 程 内 容 的 应 用 性 ， 以 解决 实际 问题 为 中 心 ， 而 不 是 以 学 科 体 系 为 中 心 ， 基 础 
理论 知识 以 应 用 为 目的 ， 以 “必需 、 够 用 ”为 度 ， 另 一 方面 ， 强 调 课程 的 实践 性 ， 在 教学 
过 程 中 增加 实践 性 环节 的 比重 。 

本 套 从 书 以 “工作 过 程 为 导向 ”， 强 调 以 培养 学 生 的 职业 行为 能 力 为 宗旨 ， 以 现实 的 
职业 要 求 为 主线 ， 选 择 与 职业 相关 的 教学 内 容 组 织 开展 教学 活动 和 过 程 ， 使 学 生 在 学 习 和 
实践 中 掌握 职业 技能 、 专 业 知识 及 工作 方法 ， 从 而 构建 属于 自己 的 经 验 和 知识 体系 ， 以 解 
决 工作 中 的 实际 问题 。 这 在 一 定 程度 上 契合 了 高 职高 专 院 校 教 学 改革 的 需求 。 随 着 技术 的 
进步 、 计 算 机 软 硬 件 的 更 新 换代 ， 不 断 有 图 书 再 版 和 新 的 图 书 加 入 。 我 们 希望 通过 对 这 一 
套 突出 职业 素质 需求 的 高 质量 教材 的 出 版 和 使 用 ， 能 促进 技能 型 人 才 培 养 的 发 展 。 


1. 丛书 特点 


本 套 从 书 具 有 以 下 特点。 

(1) 以 项 目 为 依托 ， 注 重 能 力 训练 。 以 “工作 场景 导入 ”一 “基础 知识 讲解 ”一 “ 回 
到 工作 场景 ”一 “工作 实 训 膏 ” 为 主线 编号 ， 体 现 了 以 能 力 为 本 的 教育 模式 。 

(2) 内 容 具 有 较 强 的 针对 性 和 实用 性 。 丛 书 以 贴近 职业 岗位 要 求 、 注 重 职业 素质 培养 
为 基础 ， 以 “解雇 工作 场景 问题 ”为 中 心 展 开 内 容 ， 书 中 每 一 章 都 通关 了 完成 工作 所 需 的 
知识 和 具体 操作 过 程 。 基 础 理论 知识 以 应 用 为 目的 ， 以 “必需 、 够 用 ”为 度 ， 因 而 有 具有 很 
强 的 针对 性 与 实用 性 ， 可 提高 学 生 的 实际 操作 能 力 。 

(3) 易于 学 习 、 提 高 能 力 。 通 过 具体 案例 引出 问题 ， 在 掌握 知识 后 立刻 回 到 工作 场景 
中 解决 实际 问题 ， 使 学 生 能 很 快 上 手 ， 提 高 实际 操作 能 力 ; 每 章 结 尾 的 “工作 实 训 营 ” 版 
块 都 安排 了 有 代表 意义 的 实 训 练习 ， 针 对 问题 给 出 明确 的 解决 步骤 ， 曾 明了 解决 问题 的 技 
术 要 点 ， 并 对 工作 实践 中 各 见 问题 进行 分 析 ， 使 学 生 进 一 步 提高 操作 能 力 。 

(4) 示例 丰富 、 由 浅 入 深 。 书 中 配备 了 大 量 经 过 精心 挑选 的 例题 ， 既 能 帮助 读者 理解 
知识 ， 又 具有 局 用 性 。 针 对 较 难 理解 的 问题 ， 例 子 都 是 从 简单 到 复杂 ， 内 容 逐 步 深 入 。 


2. 读者 定位 
本 系列 教材 主要 面向 高 等 职业 技术 院 校 和 应 用 型 本 科 院 校 ， 同 时 也 非常 适合 计算 机 培 
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训 班 和 编程 开 友 人 员 培 训 、 目 学 使 用 。 

3. 关于 作者 

从 书 编 委 会 特聘 执教 多 年 且 有 较 高 学 术 造 诊 和 实践 经 验 的 名 师 参 与 各 册 的 编写 。 他 们 
长 期 从 事 有 关 的 教学 和 开 友 研究 工作 ， 积 素 了 丰 遇 的 经 验 ， 对 相应 读 程 有 较 深 的 体会 与 独 
特 的 见解 ， 本 丛书 凝聚 了 他 们 多 年 的 教学 经 验 和 心血 。 

4. 互动 交流 

本 丛书 保持 了 清华 大 学 出 版 社 一 员 严 唐 、 科 学 的 图 书 风格 ， 但 由 于 我 国 计 咎 机 应 用 技 
术 教 育 正 在 芝 动 友 展 ， 要 编写 出 满足 新 形势 下 教学 需求 的 教材 ， 还 需要 不 断 地 努力 实践 。 
因此 ， 我 们 非 党 欢迎 全 国 更 多 的 融 校 老师 积极 加 入 “ 癌 职 高 专 工作 过 程 。 立 体 化 创新 规划 
教材 一 一 计算 机 系列 ”编审 委员 会 中 来 ， 推 荐 并 参与 编写 有 特色 、 有 创新 的 教材 。 同 时 ,我 
们 真 城 希望 使 用 本 从 书 的 教师 、 学 生 和 读者 朋友 提出 宇 吐 的 意见 和 建议 ， 使 之 更 钳 成 熟 。 
联系 信箱 : Book21Press@126.com。 


从 书 编 委 会 
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本 三 


在 互联 网 迅猛 友 展 和 网 络 经 济 芝 动 坚 采 的 形势 下 ， 互 联网 拉 术 成 为 信息 技术 界 关 注 的 
热门 拉 术 之 一 ， 教 育 领域 也 进行 看 深刻 的 变 于 ， 局 职 院 校 响应 看 趋势 ， 培 养 以 企业 圾 求 为 
吐 同 的 “职业 化 ”特征 融 级 应 用 型 人 才 ， 力 求 将 新 搁 术 和 应 用 融合 到 实际 双 例 之 中 。 通 过 
对 网 页 设计 实例 和 绿 合 案例 的 学 习 ， 读 者 可 以 尽快 税 握 所 学 的 知识 ， 近 高 网 页 设计 的 实战 
能 力 ;， 同时 在 网 上 提供 了 本 书 的 实例 源 代码 ， 可 供 读 者 二 接合 看 和 调用 。 


本 书 特色 


本 书 系 统 讲解 了 Web 前 并 网 页 设计 技术 ， 内 容 简 明 扼 要 ， 结 构 清晰 ， 示 例 众 多 ， 步 又 
明确 ， 讲 解 细 致 ， 突 出 可 操作 性 和 实用 性 。 本 书 不 仅 通 过 有 具体 案例 将 Web 前 新 拷 术 的 理论 
知识 融入 到 解决 实际 问题 中 ， 还 辅 以 丰 昌 的 操作 习题 和 读 后 练习 ， 能 使 学 生得 到 宛 足 的 训 
练 ， 有 助 于 理解 知识 ， 达 到 学 以 致 用 。 

本 书 主要 内 容 

第 1 章 介 绍 Web 相关 术语 、HTMLS5 发 展现 状 及 HTMLS5 文件 的 基本 结构 。 

第 2 章 讲 解 HIMLS 文件 的 基本 结构 标记 (也 称 标签 )、HTMLS5 段落、 文本 是 如 何 排版 
的 、 如 何 运 用 HIMLS 标记 在 页面 中 插入 图 片 、 设 置 背 景 以 及 如 何在 足 和 面 中 插入 列表 ， 有 了 序 
列表 、 无 序列 表 、 定 义 列 表 及 几 种 列表 的 侍 套 的 使 用 。 

第 3 章 介 绍 如 何 使 用 标签 创建 表格 及 表格 布局 。 通 过 和 完成 一 个 个 小 任务 ， 掌 握 如 何 使 用 
<table> 标 记 创 建 表格 ， 如 何 设 置 表格 的 各 种 属性 ， 如 何 运 用 表格 布局 页 面 。 

第 4 章 介 绍 超 链接 的 使 用 及 浮动 框架 。 介 绍 运 用 <a> 标 记 及 属性 实现 几 种 不 同形 式 的 超 
链接 ， 运用 <iframe> 标 记 实 现 浮 动 框架 。 通 过 综合 实例 掌握 在 浮动 框架 中 使 用 超 链接 实现 页 
面 的 跳 转 。 

第 5 章 讲 解 如 何在 页 面 上 插入 表单 ， 评 细 介 绍 表 单 中 的 各 种 元 系 ; 通过 实例 介绍 文本 
杠 、 密 码 框 、 单 选 按钮 、 复 选 框 、 文 件 域 、 按 钮 、 隐 藏 域 、 下 拉 列 表 杠 、 文 本 域 及 HTMLS 
中 新 增 元 系 的 使 用 。 

第 6 章 介 绍 多 媒体 设置 ， 介 绍 如 何 实现 在 页 面 中 插入 音频、 视频 等 多 媒体 文件 。 

第 7 章 介绍 CSS3 样式 表 。 详 细 介 绍 几 种 样式 表 的 定义 ， 样 式 表 中 关于 文本 段落 属性 、 
表格 样式 属性 、 列 表 样 式 属 性 、 图 片 属性 的 设置 ， 背 景 属性 的 设置 ， 表 单 属 性 设置 。 

第 8 章 介 绍 CSS3 中 盒子 模型 。 通 过 实例 详细 讲解 盒子 模型 的 height、width 设置 ， 盒 
子 边框 border-style、border-width 和 color 设置 ， 盒 子 模 型 的 padding 和 margin 的 设置 ， 并 
通过 大 量 的 实例 讲解 盒子 的 浮动 、 盒 子 的 定位 及 z-index 的 综合 应 用 。 

第 9 章 讲解 JavaScript 的 基本 语法 知识 。 通 过 实例 介绍 JavaScript 数据 类 型 、 运 算 符 、 
比较 运算 符 、 赋 值 运算 符 、 逻 辑 运 算 符 、 函 数 的 定义 及 使 用 。 详 细 介 绍 几 种 流程 控制 结构 
及 综合 应 用 。 

第 10 章 介 绍 JavaScript 对 象 及 对 象 编程 。 
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第 11 章 主要 介绍 表单 中 事件 的 处 理 。 详 细 介 绍 如 何 处 理 表 单 中 信息 的 验证 及 相关 事件 
的 处 理 。 

第 12 章 主 要 介绍 Bootstrap 框架 。 详 细 介 绍 Bootstrap 的 环境 配置 、 包 含 的 内 容 ; 使 用 
Bootstrap CSS 样式 表 来 设置 文本 、 图 乒 、 表 格 和 按钮 样式 ， 使 用 Bootstrap 组 件 及 插件 类 ， 
如 字体 、 下 拉 按 钮 、 导 航 栏 、 分 页 、 进 度 条 、 警 告 提 示 和 多 媒体 组 件 来 快速 设计 页 面 。 

读者 对 象 

本 书 作为 Web 前 闹 网 页 设计 技术 入 门类 教材 ， 既 可 以 作为 高 等 职业 教育 计算 机 及 相关 
专业 的 教材 ， 也 可 作为 Web 前 端 开发 技术 的 各 种 培训 班 培训 教材 ， 还 可 用 于 读者 自学 。 

本 书 由 凌 宝 营 ( 南 京 信息 职业 技术 学 院 教师 ) 任 主编 ， 高 云 、 崔 艳 春 、 陆 和 痢 痢 、 李 方 方 任 
副 主 编 ， 其 中 第 2 一 5、7 一 9、12 章 由 凌 宝 茵 编写 ， 第 1、6 章 由 高 云 编写 ， 第 11 章 由 陆 午 
和 刺 编 写 ， 第 10 章 由 李 方 方 编写 ， 由 凑 宝 营 负 责 统 稿 。 参 与 编写 和 资料 整理 的 还 有 何 光 明 、 
王 珊 珊 、 石 雅 蕉 、 许 悦 、 户 振 使 、 陈 和 莉 萍 等 。 

限于 作者 水 平 ， 书 中 难免 存在 玻 漏 之 处 ， 恳 请 广大 读者 批评 指正 。 
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Web 相关 术语 

HTML 相关 术语 

HTMLS 发 展现 状 

HTMLS 文件 的 基本 结构 

使 用 HBuilder 创建 HTML 网 页 


掌握 Web 相关 术语 。 

掌握 HIML 相关 术语 。 

掌握 HIMLS 文件 的 基本 结构 。 
掌握 使 用 HBuilder 创建 HTML 网 页 的 方法 。 
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Sa 1.1 工作 场景 导入 


【工作 场景 


网 站 中 的 网 页 内 容 丰 富 多 彩 ， 为 互联 网 提供 了 大 量 的 信息 。 今天， 各 式 各 样 的 工具 软 
件 可 以 帮助 我 们 制作 各 式 各 样 的 网 页 ， 人 们 可 以 方便 快捷 地 制作 精美 的 网 页 ， 搭 建 自己 的 
网 站 。 如 果 作 为 IT 专业 人 士 ， 不 仅 希 望 网 页 内 容 丰 宇 ， 界 面 精美 ， 还 要 求 网 页 能 够 提供 交 
妃 功 能 ， 也 束 是 说 网 页 不 仅 能 看 ， 还 要 能 操作 ， 这 融 需 要 具备 一 定 的 Web 基础 知识 ， 并 和 党 
握 网 页 制作 和 前 端 开发 的 专业 工具 的 使 用 方法 。 

下 面 需 要 制作 一 个 最 基础 的 网 页 《Hello world!》， 里 面 只 显示 简单 的 艾 字 。 

【5 引导 问题 】 

(1) 什么 是 Web? 

(2) 什么 是 HIML? 

(3) 使 用 什么 工具 软件 来 创建 HTML 网 页 ? 

(4) 怎样 创建 一 个 最 基本 的 网 页 ? 


Se 1.2 HTML5 的 相关 概念 


1.2.1 Web 概述 


1. 万 维 网 

环球 信息 网 ， 亦 作 “WWW”“W3”， 英 文 全 称 为 “World Wide Web”， 中 文 名 字 为 
“万 维 网 ”， 也 常人 简称 为 Web。 万 维 网 第 被 简称 为 网 络 ， 意 指 世 界 各 地 的 计算 机 网 络 ， 网 
络 中 的 所 有 电脑 可 以 相互 沟通 ， 所 有 的 计算 机 使 用 HTTP 的 通信 标准 。 万 维 网 的 各 个 节点 
中 包含 了 大 量 的 网 页 以 及 网 络 资源 ， 为 用 户 提供 丰富 的 信息 。 

当 用 户 需 要 查看 万 维 网 的 网 页 或 者 其 他 网 络 资源 的 时 候 ， 在 Web 客户 问 的 浏览 器 中 输 
入 需要 访问 的 网 页 或 网 络 资源 的 URL， 也 可 以 单 击 对 应 的 超 链接 。 然 后 ， 分 布 于 全 球 的 域 
名 系统 将 URL 解析 成 Web 服务 器 的 地 址 , 并 加 所 对 应 的 Web 服务 占 改 送 HITP 请 求 。 Web 
服务 器 根据 HTTP 请 求 , 将 HTML 文本 、 图 片 及 相关 文件 发 送 回 Web 客户 端 。Web 客户 端 
的 浏览 器 将 HIML、CSS 和 所 有 其 接收 到 的 文件 ， 加 上 图 像 、 链 接 和 其 他 必需 的 资源 ， 以 
网 页 的 形式 显示 给 用 户 。 

2. Web 标准 


Web 标准 不 是 东 一 个 标准 ， 而 是 一 系列 标准 的 集合 。Web 标准 的 存在 意义 是 使 得 浏览 
露 开 太 商 和 Web 程序 开 友 人 员 在 开 上 发 新 的 应 用 程序 时 遵守 指定 的 标准 , 有 利于 Web 更 好 地 
及 展 。 使 用 Web 标准 ， 使 得 所 开 友 出 来 的 网 页 容易 被 所 有 开 及 人 员 阅 读 和 维护 ， 能 够 要 所 
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有 浏览 器 正确 显示 ， 也 能 够 被 搜索 引擎 更 容易 访问 和 转换 。 

Web 标准 大 部 分 由 万 维 网 联盟 (W3C) 起 日 和 发 布 ， 也 有 一 些 是 其 他 标准 组 织 制订 的 标 
准 ， 比 如 ECMA(European Computer Manufacturers Association， 欧 洲 计算 机 制造 商 协 会 ) 的 
ECMAScript 标准 。 目 前 ， 最 草 要 的 W3C 标准 有 HIML、CSS、XML、XSL 和 DOM.。 


3. URL 

URL (Uniform Resource Location， 统 一 资源 定位 符 ) 是 万 维 网 上 标准 资源 的 地 址 。 万 维 
网 上 的 每 个 文件 都 有 一 个 唯一 的 URL， 它 包含 的 信息 指出 文件 的 位 置 以 及 浏览 器 应 该 怎么 
处 理 它 。URL 通常 由 三 部 分 组 成 : 协议 类 型 、 主 机 名 和 路 径 及 文件 名 。 协 议 类 型 决定 浏览 
器 如 何 处 理 打开 的 文件 ， 主 机 名 是 指 文件 所 在 的 服务 器 的 名 称 ; 往往 主机 上 存在 多 个 路 径 
和 多 个 文件 ， 因 此 还 需要 明确 路 径 和 文件 名 。 

4. HTTP 和 HTTPS 


HTTP(HyperText Transfer Protocol, 超 文 本 传输 协议 ) 是 万 维 网 上 应 用 最 为 广泛 的 一 种 网 
络 协议 ， 是 用 于 从 WWW 服务 器 传输 超 文 本 到 Web 客户 站 的 浏 贤 绒 的 传输 协议 ， 所 有 的 万 
维 网 文件 都 必须 还 守 这 个 标准 。HITP 可 以 使 浏览 厚 更 加 高 效 ， 使 网 络 传输 损耗 减少 。 它 不 
仅 能 保证 计算 机 正确 快速 地 传输 超 文本 文 要 ， 还 可 以 传输 指定 部 分 文档 以 及 首先 显示 的 内 
容 部 分 。 基 于 HITP 协议 的 客户 机 /服务 器 模式 的 信息 交换 过 程 包 括 建立 连接 、 厂 送 请 求 信 
思 、 发 送 啊 应 信息 和 关闭 连接 。 

HTTP 协议 以 明文 方式 发 送 内 容 , 不 提供 任何 方式 的 数据 加 密 ， 因此 HITP 不 适合 传输 
敏感 信息 ， 比 如 信用 卡号 、 密 人 码 等 。 为 了 弥补 HTTP 的 这 一 缺陷 ， 需 要 使 用 另 一 种 协议 一 一 
HIIPSs 

HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer, 安全 套 接 字 层 超 文 本 传输 
协议 )， 是 以 安全 为 目标 的 HITP 通道 ， 是 HITP 的 安全 版 。HTTPS 在 HTTP 的 基础 上 加 
入 了 SSL 协议 ，SSL 协议 依 徘 证 书 来 验证 服务 占 的 号 份 ， 并 为 浏览 器 和 服务 器 之 则 的 通信 


加 密 。 
5 TCPAP 


TCP(Transmission Control Protocol， 传 输 控 制 协议 ) 是 一 种 面 回 连接 的 、 可 靠 的 、 基 于 字 
节 流 的 传输 层 通信 协议 。 在 简化 的 计算 机 网 络 OSI 模型 中 ， 它 完成 第 四 层 传 输 层 所 指定 的 
功能 。 应 用 层 同 TCP 层 发 送 用 于 网 间 传 输 的 、 用 8 位 字 节 表示 的 数据 流 ， 然 后 TCP 层 把 数 
据 注 分 区 成 适当 长 度 的 报 文 段 , 之 后 TCP 层 把 结果 包 传 给 IP 层 ， 由 它 来 通过 网 络 将 包 传 送 
给 接收 端 实体 的 TCP 层 。TCP 层 为 了 保证 个 发 生 丢 包 ， 就 给 每 个 包 一 个 序号 ， 同 时 序号 也 
保证 了 传送 到 接收 奖 实 体 的 包 的 按 序 接收 。 然 后 接收 器 实体 对 已 成 功 收 到 的 包 发 回 一 个 相 
应 的 确认 (ACK);， 如果 发 送 端 实体 在 合理 的 往返 时 延 (RTT) 内 未 收 到 确认 ， 那 么 对 应 的 数据 
包 就 被 假设 为 已 丢失 ， 将 会 被 进行 重 传 。ITCP 协议 用 一 个 校 验 和 函数 来 检验 数据 是 否 有 错 


误 ; 在 及 送 和 接收 时 都 要 计算 校 验 和 。 
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1229 人 1 人 么 十 HUNML 


1. 超 链接 
超 链 接 (Hyperlink) 是 网 页 上 的 一 个 图 标 或 一 段 文字 , 只 要 用 忆 单 击 束 可 以 目 动 跳 转 全 该 
超 链接 所 对 应 的 特定 网 页 或 是 所 在 网 页 的 特定 位 置 。 


2. 超 文本 


超 文 本 (Hypertexb 是 一 种 按 信息 之 间 关 系 非 线性 地 存储 、 组 织 、 管 理 和 浏览 信息 的 计算 
机 技术 。 它 的 本 质 和 基本 特征 就 是 在 文档 内 部 和 文档 之 间 建立 关系 ， 正 是 这 种 关系 给 了 文 
本 以 非 线性 的 组 织 。 它 采用 超 链接 将 各 种 不 同 空间 的 文字 信息 组 织 在 一 起 ， 其 中 的 文字 可 
以 链接 到 其 他 位 置 或 者 文档 ， 从 而 可 以 从 当前 阅读 位 置 直接 切换 到 该 链接 所 指向 的 位 置 。 
超 文本 是 由 若干 信息 节点 和 表示 信息 节点 之 间 相关 性 的 链 构成 的 一 个 具有 一 定 罗 辑 结 构 和 
语义 关系 的 非 线性 网 络 。 


3. HTML 


HTML(HyperText Markup Language， 超 文本 标记 语言 ) 是 一 种 简单 、 通 用 的 用 来 拉 述 网 
页 的 标记 语言 ， 通 过 标记 (或 标签 ) 来 标示 要 显示 的 网 页 中 的 各 个 部 分 。HTML 文件 本 号 是 一 
种 文本 文件 ， 通 过 在 文本 文件 中 添加 标记 来 告诉 浏览 器 如 何 显 示 其 中 的 内 容 ( 如 : 文字 如 何 
处 理 ， 男 面 如 何 安 排 ， 图片 如 何 显 示 竺 )。 浏 贤 句 按 顺 序 阅 读 HTML 文件 ， 然 后 根据 标记 解 
释 和 显示 其 标示 的 内 容 。 需 要 注意 的 是 ， 对 于 不 同 的 浏览 器 ， 对 同一 标记 可 能 会 有 个 完全 
相同 的 解释 ， 因 而 可 能 会 有 不 同 的 显示 效果 。 

4. 网 页 

网 页 是 网 站 的 基本 信息 单位 ， 是 万 维 网 的 基本 文档 。 网 页 是 一 个 包含 HIML 标记 的 纯 
文本 文件 ， 它 由 文学 、 图 片 、 首 频 、 视 频 等 多 种 录 体 信息 以 及 链接 组 成 ， 是 用 HIML 编写 
的 ， 通 过 链接 实现 与 其 他 网 页 或 网 站 的 关联 和 跳 转 。 网 页 要 通过 网 页 浏览 器 来 阅读 。 

5. 网 站 

网 站 是 一 种 沟通 工具 ， 人 们 可 以 通过 网 站 来 发 布 目 己 想 要 公开 的 资讯 ， 或 者 利用 网 站 
来 所 供 相 关 的 网 络 服务 。 网 站 由 众多 不 同 内 容 的 网 页 构成 ， 网 页 的 内 容 可 体现 网 站 的 全 部 
功能 。 人 们 可 以 通过 网 页 浏览 右 来 访问 网 站 ， 获 取 目 己 需要 的 资讯 或 者 理 党 网 络 服务 。 目 
前 多 数 网 站 由 域名 、 空 间 服 务 器 、DNS 域名 解析 、 网 站 程序 、 数 据 库 等 组 成 。 

6. 测 时 尼 

浏览 器 是 指 可 以 显示 网 页 服务 器 或 者 文件 系统 的 HTML 文件 (标准 通用 标记 语言 的 一 个 
应 用 ) 岂 容 ， 并 让 用 户 与 这 些 文 件 交 互 的 一 种 软件 。 目 前 最 为 主流 的 浏览 船 有 五 大 类 ， 分 别 
十 正 、Firefox、Google Chrome、Safarl、Opera。 

浏 讽 玲 最 重要 的 部 分 是 浏览 喜 的 内 核 。 浏 质 画 和 内核 是 浏 讽 画 的 核心 , 也 称 " 泻 染 引 擎 ”， 
用 来 解释 网 页 语法 并 泻 染 到 网 页 上 。 浏 览 右 内 核 决 定 了 浏览 右 访 如何 显 示 网 页 内 容 以 及 页 
面 的 格式 信息 。 不 同 的 浏览 器 内 核对 网 页 的 语法 解释 也 不 同 ， 因 此 网 页 开发 者 需要 在 不 同 
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内 核 的 浏览 器 中 测试 网 页 的 泻 染 效果 ,目前 四 大 内 核 分 别 是 : Trident、WebKit、 Blink、Gecko。 
五 大 主流 浏 贤 旨 中 ，IE 浏览 露 使 用 Trident 内 核 ， 俗 称 正 内 核 ; Firefox 浏 贤 右 使 用 Gecko 
内 核 ， 俗 称 Firefox 内 核 ，Google Chrome 浏 顺 器 以 前 使 用 WebKit 内 核 ， 现 在 使 用 Blink 内 
核 ，Safari 浏 宽 右 使 用 WebKit 内 核 ，Opera 浏览 占 最 初 使 用 目 己 的 Presto 内 核 ， 后 来 使 用 
WebKit 内 核 ， 现 在 使 用 Blink 内 核 。 


1.2.3 ” HTML5 的 发 展现 状 


HTMLS 是 万 维 网 联盟 (W3C) 和 网 页 超 文 本 技术 工作 小 组 (WHATWG) 合 作 的 产物 ， 是 
HTML 标准 的 下 一 个 重要 版 本 ， 用 来 替代 HTML 4.01、XHTML 1.0 以 及 XHTML 1.1。 目 
前 HTMLS 仍 处 于 完善 之 中 ， 大 部 分 现代 浏览 器 已 经 能 文 持 某 些 HTMLS 文档 。 

际 备 的 特性 如 下 : 

(1) 淘汰 过 时 的 或 元 余 的 属性 。 

(2) 添加 新 的 语义 化 元 素 ， 比 如 <header>、<footer> 和 <section>。 

(3) 表单 2.0: 改进 了 HTML Web 表单 ， 为 <input> 标记 引入 了 一 些 新 的 属性 。 

(4) 持久 的 本 地 存储 : 避免 通过 第 三 方 插件 实现 访问 的 缺陷 。 

(5) WebSocket: 用 于 Web 应 用 程序 的 下 一 代 双 回 通信 技术 。 

(6) 服务 器 推送 事件 : 引入 从 Web 服务 器 到 Web 浏览 器 的 事件 ,也 被 称 作 服务 器 推 
送 事件 (SSE)。 

(7) Canvas: 支持 用 JavaScript 以 编程 的 方式 进行 二 维 绘图 。 

(8) 音频 和 视频 : 在 网 页 中 人 藤 入 音频 或 视频 而 无 须 借 助 第 三 方 插件 。 

(9) 地 理 定 位 : 用 户 可 以 选择 与 网 页 共享 他 们 的 地 理 位 置 。 

(10) 微 数 据 : 允许 用 户 创建 HIMLS 之 外 的 自 定 义 词 汇 表 ， 以 及 使 用 目 定义 语义 扩展 
网 页 。 

(11) 拖 放 : 把 同一 网 页 上 的 条 目 从 一 个 位 置 拖 放 到 另 一 个 位 置 。 

(12) 回 后 兼容 尽 可 能 地 对 现 有 浏览 器 同 后 兼容 ， 新 特性 都 是 建立 在 现 有 特性 的 基础 
上 ， 并 且 人 允许 为 旧 浏览 器 提供 备用 内 容 。 

HTMLS 的 缺点 如 下 : 

(1) 欧洲 网 络 信息 安全 机 构 已 经 友 出 警告 ，HIMLS 可 能 并 不 够 安全 。 

(2) HIMLS 还 没有 被 各 大 浏览 器 完全 文 持 。 

(3) HTMLS 要 求 相 关 技 术 必 须 全 部 开放 ， 而 这 可 能 触及 一 些 大 公司 的 利益 。 

随 着 移动 化 的 进程 ，HTMLS 终 将 成 为 主流 标准 。 


Sa 1.3 开发 工具 


1.3.1 HTML5 文件 的 基本 结构 


一 个 网 页 对 应 一 个 或 多 个 HTML 文件 ，HTML 文件 以 .htm 或 .html 为 扩展 名 。 标 准 的 
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HTML 文件 中 包含 各 和 干 标记 ( 广 : 有 的 资料 中 也 把 “标记 ” 称 为 “标签 ”， 由 于 “标签 ”在 
图 形 用 户 界 面 中 有 另外 的 含义 ， 所 以 本 书 用 “标记 ”表示 HTML 文件 的 组 成 部 分 )， 而 且 大 
多 数 标记 都 是 成 对 出 现 ， 例 如 :， <html>......</html>。 标 记 中 ， 开 头 和 结尾 的 标记 名 称 用 尖 
括号 括 起 来 ， 结 尾市 和 斜 杠 的 标记 名 称 元 素 表 示 是 该 标记 的 结尾 。 标 记名 称 不 区 分 大 小 写 ， 
且 在 开头 的 标记 名 称 后 往往 有 相关 的 属性 说 明 。 

【实例 1.1】 用 文本 编辑 软件 编写 第 一 个 网 页 ， 文 件 名 称 为 chapter1.1.html， 内 容 如 下 : 


<IDOCTYPE html> 
<htm]l> 
<head> 
<meta charset="UTF-8"> 
<title> 第 一 个 网 页 </title> 
</head> 
<body> 
<h1> 我 的 第 一 个 网 页 </h1> 
<p> 这 是 我 创建 的 第 一 个 网 页 。< /p> 
</bhody> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter1.1.html， 页 面 效果 如 图 1-1 所 示 。 


六 站 第 一 个 网 页 x 是 


一 


(> | 127.0.0.1:8020/HTM 


我 的 第 一 个 网 页 


这 是 我 创建 的 第 一 个 网 页 。 


1-1 _ chapter1.1.html 的 页 面 效 果 


如 果 需 要 查看 浏览 器 中 打开 的 网 页 的 源 代 码 ， 可 以 在 网 页 中 空白 处 右 击 ， 在 弹出 的 快 
捷 菜 单 中 选择 “查看 网 页 源 代码 ”命令 ， 或 是 在 菜单 栏 中 选择 “开发 者 工具 ”命令 ， 从 而 
打开 开发 人 员工 具 界 面 。 查 看 源 代码 效果 如 图 1-2 所 示 。 

作为 符合 HIMLS 的 网 页 ， 文 件 第 一 行 必 须 添 加 <IDOCTYPE html> 标 记 。<!DOCTYPE 
html> 标 记 说 明 该 文档 是 一 个 HIMLS 文档 。 如 果 使 用 支持 HIMLS 的 语法 规则 的 浏览 器 浏 
览 HITMLS 网 页 文件 , 那么 浏览 器 会 以 HIMLS 页 面 的 形式 显示 该 网 页 ; 反之 ,如 果 不 支持 ， 
网 页 的 显示 也 不 会 受到 影响 。 

HTMLS 文件 除 第 一 行 外 ， 必须 包 含 <html>...</html> 标 记 , 该 标记 是 网 页 文件 中 最 外 屋 
的 标记 ， 网 页 文件 包含 在 该 标记 中 。<html>...</html> 标 记 中 ， 往 往 还 包含 <head>...</head> 
标记 和 <body>...</body> 标 记 。 这 三 个 标记 是 网 页 文件 中 必须 包含 的 标记 。 
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<head>...</head> 标 记 里 包含 了 当前 文档 的 基本 信息 ， 如 文档 的 标题 、 文 档 的 元 数据 、 
使 用 的 样式 表 和 脚本 等 。<body>...</body> 标 记 里 包含 了 网 页 的 正文 信息 ,信息 类 型 包括 文 
字 、 图 片 、 音 频 、 视 频 等 。 用 户 不 但 可 以 在 浏览 器 里 查看 网 页 ， 还 可 以 操作 网 页 上 的 表单 
控件 ， 从 而 完成 人 机 交流 。 


/中 第 一 个 网 页 x We 
' 
CG |Q 127.0.0.1:8020/HTML5%2bCSS3%2bjJavaScript 网 页 设计 实用 教程 /实例 /第 1 章 /chapter1.1.html? hbt=15313 
| [rR 口 | Elements Console SOUTCES Network Performance Memaory Application 冷 
Page 四 : chapterl,1.html...=1531384183320 其 [rl 
"top 1 = kk Watch 
“O127001802 3 
.a HTMLS%2l 4 <head> 
3 <meta charset="UTF-8"> 


*tit1le» 第 一 个 dn</titley v Scope 
</head> 


V Call tack 


[i 
me 
| 瑰 的 第 一 个 同 页 chapterl 


只 
世上 
9 *body> 


18 <nl> 我 的 第 一 个 网 页 <, 下 Breakpoints 
11 <p > 这 十 我 创 旨 的 第 一 个 网 ° </p> . 

12 < /bod, opo 
2 kb AHRTetch Breakpoints 


14 </html> . 
k DOM Breakpoints 


k# Global Listeners 


kb Event Listener Breakpoints 


k {} Line 14 Columns 


1-2 ”查看 源 代码 效果 


1.3.2 使 用 HBuilder 创建 HTML 网 页 


HIMLS 网 页 可 以 使 用 任何 文本 编辑 软件 编辑 ， 例 如 Windows 下 的 Notepad， 但 专业 人 
员 往往 采用 专业 的 HTML 编辑 软件 来 编辑 HTML 文件 。 时 下 流行 的 HTML 编辑 软件 包括 
Adobe Dreamweaver、CoffeeCup HTML Editor 等 。 本 书 使 用 的 是 一 区 专 业 的 HIML 编辑 软 
件 一 一 HBuilder。 

HBuilder 不 仅仅 用 于 开发 HTML,， 还 可 用 于 开发 JS 文件 和 CSS 文件 ， 还 可 以 同时 配合 
HTML 的 后 端 脚 本 语言 如 PHP、JSP， 是 一 个 用 于 前 端 开 发 的 IDE。HBuilder 的 语法 库 包括 
W3C 的 HTML、JavaScript、CSS 的 正式 标准 和 推荐 标准 等 ，ECMAScript 中 浏览 右 文 持 的 
部 分 ， 还 有 各 大 浏览 器 的 扩展 语法 ， 如 webkit、moz、ms 等 ， 均 实时 更 新 到 各 浏览 器 的 最 
新 版 本 。HBuilder 完美 地 支持 手机 App 开发 ， 包 括 项 目 创 建 、 项 目 调试 和 项 目 打包 等 功能 。 

使 用 HBuilder 编写 HTML 网 页 的 具体 操作 步骤 如 下 。 

(1) 启动 HBuilder， 局 动 后 界面 如 图 1-3 所 示 。 

(2) 在 蘑 单 栏 中 选择 “文件 ”一 “新 建 ” 一 “Web 项目” 命令， 打开 “创建 Web 项 目 ” 
对 话 框 ， 如 图 1-4 所 示 。 在 对 话 框 中 ,输入 项 目 名 称 和 项 目 所 在 位 置 ， 为 需要 创建 的 网 页 设 
置 所 在 的 文件 夹 。 

如 果 该 项 目 己 创建 ， 则 在 菜单 栏 中 选择 “视图 ”一 “显示 视图 ”一 “项 目 管理 器 ” 命 
令 ， 便 可 看 到 该 项 目的 名 称 ， 如 图 1-$ 所 示 。 
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- | 
| 六 件 四 ” 竺 姓 搬入 DO 转 迪 [加 选择 侣 ”由 转 tS) 宕 扎 贞 运 和 全 未 行 如 工具 中 机 于 5 痢 助 出 ] 
Te 有 过 过 [ 观 击 Ctrl) a ~ :EE mes * 
BB 
Ge] 
1 EE 
Builder 


W 面 入 


矣 建 Web 项 目 用 建 称 动 App 新 违 wap2app 打开 目录 打开 硕 目 


| 国 地 设备 上 HBuilder 同 s 于 民 以 慨 ， 浴 共 收 用 [HHuldartl ,， 极 还 月 ; . : 星 ahechoice 人 126cnm 3 


1-3 HBuilder 的 主 齐 面 


| 国 训 建 web 项 目 口 基 
| 
剖 建 web 项目 
| 请 重 尺 面目 名 称 并 是 渤 搓 一 个 懂 栋 
项 目 苦 昌 
项 目 名 称 ， |test 
上 二 
还 择 季 攀 
E41 默 认 项 目 醚 认 项 目 只 包 当 indechtm[ 之 考 看 拍 
DD Healle HBuilder 壤 项 目 可 以 让 性 快速 了 刻 HEuilder ， 试 一 下 吧 ! 直 制 
器 汶 信 项 目 灌 信 WEB 上 PP ,使 用 此 楼板 康 持 油 信 JS-SDK 节 提示 慷 板 


到 1-4 “创建 Web 项目” 对 话 框 


HBuilder 一 口 
| 立 件 日 ”六 轴 EE) 疾 和 四 ”转让 ID) 应 择 加 也 转 上 G) 查找 山 ， 运 行 (入行 加 ”工具 中” 视 固 (W 帮助 由] 
+" 小 Ih” 辐 力 ~ 且 * .| 搜索 { 观 击 Ctrl ) a 7 ; ED Ta ~ 
项 目 管理 中 中 = 攻略 一口 Ee 
+ [HelloHBuilder 
pe best 
; 
回 Builder 
Ww A 
颗 奸 Wieb 项 目 新 于 移动 App 靳 娃 wap2app 打开 目录 打开 项 目 
| E 屹 树 0 项 :了 由 cchoice 面 1z6com 。。 牙 本 我 人 


图 1-5 显示 项 目的 名 称 
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(3) 在 菜单 栏 中 选择 i = “新 建 ” et “HTMI 文件 ” ， 打开 “创建 文件 向 导 ” 
对 话 框 ， 如 图 1-6 所 示 。 在 该 对 话 框 中 ， 输 入 文件 目录 和 文件 名 ， 创 建 所 需 的 HTML 文件 。 


国 创建 妆 件 向 导 口 xX 


创建 HTML 冯 牢 向 导 
本 向 导 剖 建 *ftrml *,htm 扩展 癌 的 交 件 


六 人 性 所 在 目录 近 )} | test | EL | 
六 性 名 IF: | test,html | 


选择 异 扳 二 定 义 模 怕 


口 mui 和 下拉 剧 新 ，。 上 拉 人 就 [ 单 webview 枫 未】 
十 mui 登 千 枢 板 
LL mui 设 苹 
六 mu 问题 反馈 
口 ] 列 妻 刘 详 情 最 佳 实战 


@ 本 | 


1-6 “创建 文件 向 导 ” 对 话 框 


(4) HIML 文件 创建 结束 ， 在 羔 单 栏 中 选择 “文件 ”一 “打开 文件 ”命令 ， 打 开 已 创 
建 的 HIML 文件 ， 可 以 进行 HTML 文件 的 编辑 。HBuilder 有 四 种 编辑 模式 ， 分 别 为 开 肥 视 
图 模式 、 边 改 边 看 模式 、WebView 调试 模式 和 团队 同步 模式 。 

开发 视图 界面 如 图 1-7 所 示 。 


@ testitssthtml - HBuilder 一 口 w 
广 梓 是 晨 红 上 E 播 四 转 呈 [加 于 深 (9 目的 二 一 横山 运行 仿 ) 发 行 他) 工具 站 袖 到 WW 埠 有 iH) 
十 回国 各 提 | | 地 让 区 ”有 加 授 吉 | 观 击 Ctrl ) 驴 = 开发 视图 
Ea “test.html 下 二 
1 <IDOCTYPE htmls 
-<html 
用 一 Theady 
meta Tha 
title ed 让 -创建 的 网 而 Ftit]e 
et: 
Es body 
18 1> 第 一 个 用 HBuilder 创 建 的 网 页 
11 <py p> 这 是 我 的 第 一 个 站 用 HBui1lde "创建 人 网 世 : afps 
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图 1-7 开发 视图 效果 


边 改 边 看 模式 可 以 使 得 开发 人 员 不 用 打开 浏览 占 束 可 以 同时 三 看 左边 的 源 代 公 和 右边 
的 显示 效果 ， 每 次 保存 文件 时 ， 显 示 效 果 都 会 目 动 更 新 ， 界 面 如 图 1-8 所 示 。 

(5) HIML 文件 编辑 结束 后 ， 在 沫 单 栏 中 选择 “运行 ”一 “浏览 器 运行 ”命令 ， 可 以 
选择 需要 的 浏览 茵 来 浏览 页 面 效果 。HBuilder 中 可 以 选择 的 浏览 右 包 括 Chrome、Edge、 正 、 
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Safari、Firefox， 在 选择 前 务必 确认 系统 内 已 正确 安装 了 访 浏 览 器 ， 否 则 会 显示 “HBuilder 
无 法 在 这 台 hae i eh XX 浏览 器 ”的 提示 信息 。 本 书 中 除非 做 了 特别 说 明 ， 
各 实例 均 采 用 Chrome 浏览 器 来 浏览 页 


| @ testitest.himl 。HBuilder 一 口 其 
浆 忻 中” 峰 福 让) 猎 关 册封 以 [加 证 择 名 中 转 是 | 查 撕 出 证 行 昌 ) 发 行人 B 工具 站 杭 因 WW 故 助 IH 
yp 回 大 车 让 | 同和 二 二 东胡 = | 现 索 【 对 击 Ctrl ) 总 于 功 改 边 寺 模式 
加 "esthtml 庆 | 一 日 || 吉 Web 浏 这 点 于 
| <IDOCTYPE htnl> . 兴 了 加 二 3 国信 [hupwni27.00.1:8020nestitest himl “| 国 扣 2 


a <*htmly 
Ec 


Wr charsete" Utft -9"» 第 we 用 HBuilder 创 建 的 ] 网 页 


titles 弟 一 售 用 HBuilder 创 建 的 网 丙 jtitlex 


3 这 是 我 的 第 一 个 用 HBulder 创 建 的 网 页 。 
三 *bodyy 

4 this 第 一 个 用 HBuilder 便 建 的 网 页 < /his 

11 “py 这 是 我 的 第 一 个 用 HBuilder 创 建 的 网 页 。* /py 

了 过 /bodyy 


13 
14 Bas 


行 : 14 列 : 8 HTML Editor 


1-8” 边 改 边 看 视图 效果 


Rw 1.4 回 到 工作 场景 


通过 1.2、1.3 节 内 容 的 学 习 ， 已 经 学 习 了 Web 的 相关 术语 和 HTML 的 相关 术语 ， 了 解 
了 HTMLS 的 发 展现 状 , 明确 了 HIML5 文件 的 基本 结构 , 掌握 了 使 用 HBuilder 创建 HTML 
页 面 的 方法 。 下 面 回 到 前 面 介绍 的 工作 场景 中 ， 完 成 工作 任务 。 

【工作 过 程 】 了 制作 一 个 最 基础 的 网 页 《Hello，world!》， 里 面 只 显示 人 简单 的 文字 
“Hello,world!”。 工 作 过 程 一 的 页 面 效 果 如 图 1-9 所 示 。 


i er | x [ 5 口 六 
口 实例 1.2 = 


| 他 | © 127.0.0.1 :8020/HTML5362bCSs5382bJavascript 网 页 设计 空 用 邢 程 /实例 /第 1 章 /chapterl.2html?_hbt=15313.， 普 | : 


Hello, world! 


1-9 最 基本 的 网 页 的 页 面 效 果 
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创建 网 页 ， 文 件 名 为 chapter1.2.html， 内 容 如 下 所 示 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 实 例 1.2</title> 
</head> 
<body> 
<p> Hello World! </p> 
</body> 
</html> 


1.5.1 训练 实例 一 一 自行 设计 一 个 简单 的 网 页 


1. 训练 内 容 

自行 设计 一 个 页 面 ， 珊 有 多 行文 字 ， 内 容 为 目 己 喜爱 的 一 首 证 诗 。 
2. 训练 目的 

> 掌握 HTML 网 页 的 基本 结构 。 

> 掌握 HBuilder 的 使 用 。 

3. 训练 过 程 

参照 1.4 节 中 的 操作 步骤 。 

4. 技术 要 点 

熟悉 HBuilder 各 菜单 的 使 用 。 


1.5.2 ”工作 实践 常见 问题 解析 


【常见 问题 1】HBuilder 左边 的 项 目 管理 器 不 见 了 怎么 办 ? 

【 答 】 在 菜单 栏 中 选择 “视图 ”一 “显示 视图 ”一 “项 目 管 理 器 ”命令 ， 就 可 以 打开 
项 目 管理 器 。 

【常见 问题 2】 在 HBuilder 中 打开 的 网 页 文件 中 ， 中 文 出 现 乱码 ， 怎 么 办 ? 

【 答 】 这 是 由 于 网 页 在 创建 时 没有 正确 设置 编码 格式 引起 的 。 解 决 方法 如 下 : 

(1) 查看 网 页 文件 中 是 否 有 如 下 代码 ， 如 缺少 则 加 上 。 


<meta charset="UTF-—8™ /> 


这 段 代 码 应 该 位 于 <head> 和 </head> 之 间 。 
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(2) 如 果 问 题 仍 未 解决 ， 那 么 需要 使 用 记事 本 把 网 页 文件 打开 ， 然 后 另存 为 UTF-8 格 
式 的 文件 。“ 另 存 为 ”对 话 框 的 右 下 角 有 “编码 ”选项 ， 如 果 网 页 文件 中 的 中 文 出 现 乱 码 ， 
往往 是 因为 编码 格式 设置 成 了 “ANSI”， 改 为 “UTF-8” 即 可 。 


sa 1.6 本 章 小 结 


万 维 网 中 的 所 有 电脑 可 以 相互 沟通 ， 所 有 的 计算 机 使 用 HTTP 的 通信 标准 。 万 维 网 的 
各 个 市 尽 中 包含 了 大 量 的 网 页 以 及 网 络 资源 ， 为 用 尸 提供 丰富 的 信息 。Web 标准 的 存在 意 
义 是 使 得 浏览 器 开 及 商 和 Web 程序 开发 人 员 在 开发 新 的 应 用 程序 时 芝 守 指定 的 标准 。URL 
(Uniform Resource Location, 统一 资源 定位 和 从) 是 万 维 网 上 标准 资源 的 地 址 。 HTTP(HyperText 
Transfer Protocol， 超 文本 传输 协议 ) 是 万 维 网 上 应 用 最 为 广泛 的 一 种 网 络 协议 ， 是 用 于 从 
WWW 服务 器 传输 超 文 本 到 Web 客户 病 的 浏 贤 器 的 传输 协议 。TCP(Transmission Control 
Protocol， 传 输 控 制 协议 ) 是 一 种 面 回 连接 的 、 可 靠 的 、 基 于 字 节 流 的 传输 层 通信 协议 。 

超 链接 (Hyperlink) 是 网 页 上 的 一 个 图 标 或 一 段 文学 , 对 应 特定 的 网 页 或 是 所 在 网 页 的 特 
定位 置 。 超 文本 采用 超 链接 将 文字 信息 组 织 在 一 起 ， 其 中 的 文字 可 以 链接 到 其 他 位 置 或 者 
文档 。HTML(HyperText Markup Language， 超 文本 标记 语言 ) 是 一 种 简单 、 通 用 的 用 来 擂 
述 网 页 的 标记 语言 ， 通 过 标记 来 标示 要 显示 的 网 页 中 的 各 个 部 分 。 网 页 是 一 个 包 侣 HIML 
标记 的 纯 文 本 文件 , 它 由 文字 、 疼 片 、 音频、 视频 等 多 种 媒体 信息 以 及 链接 组 成 , 是 用 HIML 
编写 的 ， 通 过 链接 实现 与 其 他 网 页 或 网 站 的 关联 和 跳 转 。 网 站 由 众多 不 同 内 容 的 网 页 构成 ， 
网 页 的 内 容 可 体现 网 站 的 全 部 功能 。 浏 贤 器 是 指 可 以 显示 网 页 服务 右 或 者 文件 系统 的 
HTML 文件 (标准 通用 标记 语言 的 一 个 应 用 ) 内 容 ， 并 让 用 户 与 这 些 文件 交互 的 一 种 软件 。 

HTMLS 是 万 维 网 联盟 (W3C) 和 网 页 超 文 本 技术 工作 小 组 (WHATWG) 合 作 的 产物 ， 是 
HTML 标准 的 下 一 个 重要 版 本 ， 用 来 蔡 代 HIML 4.01、XHTML 1.0 以 及 XHTML 1.1。 

标准 的 HIML 文件 中 包含 在 干 标记 ， 而 且 大 多 数 标 记者 是 成 对 出 现 。<html>...</html> 
标记 中 , 往往 还 包含 <head>...</head> 标 记 和 <body>...</body> 标 记 。 这 三 个 标记 是 网 页 文件 
中 必须 包含 的 标记 。 

HBuilder 不 仅 用 于 开发 HTML， 还 可 用 于 开发 JS 文件 和 CSS 文件 ， 还 可 以 同时 配合 
HTML 的 后 端 脚本 语言 如 PHP、JSP， 是 一 个 用 于 前 问 开 上 有 友 的 IDE。 


x2 17 习 题 


1. 目前 在 Internet 上 应 用 最 为 广泛 的 服务 是 (  )。 


A. FTP B. WWW GC Telnet D. Gopher 
2. 为 了 标识 一 个 HTML 文件 开始 应 该 使 用 的 HIML 标记 是 (  )。 
A. <table> B. <body> C. <html> D. <a> 
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3. 如 果 站 点 服务 器 支持 安全 套 接 层 (SSL), 那 么 连接 到 安全 站 点 上 的 所 有 URL 开头 是 


( 小 
A. HTIP B. HTTPS 人 1 
4. ”HTML 的 英文 全 称 是 ( ” )， 
A. Hypertext Markup Laneuage B. High Text Movie Laneuage 


C. Hypertransfer Movie Laneuage D. Hightext Markup Laneuage 
5. 网 页 的 主体 内 容 将 写 在 什么 We { 


A. <body>...</body> B. <head>...</head> 
C. <html>...</html> D. <p>...</p> 
二 、 填 空 题 
1 WWW 是 的 缩写 ， 其 含义 是 。 
2. 我们 访问 网 页 使 用 协议 。 
3. 采用 将 
各 种 不 同 空 间 的 文字 信息 组 织 在 一 起 ， 其 中 的 文字 可 以 链接 到 其 他 位 置 或 者 文档 。 
4. HTML 文件 的 扩展 名 可 以 用 或 LU 
5 是 一 个 包含 HTML 标记 的 FE 
它 由 
等 多 


媒体 信息 以 及 链接 组 成 。 
三 、 操 作 题 
使 用 给 定 的 素材 创建 网 页 《美丽 的 格 桑 花 》， 文 件 名 为 ex1.1.html， 文 件 内 容 如 下 : 


<IDOCTYPE html> 
<htm]l> 
<head> 
<meta charset=—="UTF 8"> 
<title> 美 丽 的 格 桑 花 </title> 
</head> 
<body bgqcolor="gray"> 
<hl aligqn="center"> 美 丽 的 格 桑 伦 </h1> 
<Vldeo src="image/gesanghua.MOV™" width="800px" height="400px" 
controls="controls"™" loop="]oop™" autoplay="autoplay"></video> 
<br> 
<aud1io src="image/gesanghua.mp3" controls="controls™" loop="]loop" 
autoplay="autoplay"></audlio> 
<form> 
<input type="button" Value=" 关 闭 当 前 页 面 " 
onclick="Javascript:window.close(})};"/> 
</form> 
</body> 
</html> 
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文件 exl1.1.html 的 页 面 效果 如 图 1-10 所 示 。 


0 Le 二 口 Xx 
让 吕 莽 罚 的 性 至 x 


GG | 127.0.0.1:80207HTML59%zbC5s39%zbjavascript 网 页 设计 实用 笋 程 / 习 明 / 理 1 襄 /ex1.1.html?_hbt=153138429.， 全 | : 


0:00/ 0:14 


a 


Bb O00 m52 


鞠 团 当前 页 面 


1-10 “文件 ex1.1.html 的 页 面 效 果 


HTMLS 文件 的 基本 结构 标记 
HTMLS 文本 排版 
HTMLS 图 像 

HTMLS 列表 


掌握 使 用 文件 基本 结构 标记 来 设置 HIMLS ; 
掌握 使 用 文本 排版 标记 来 设置 HTMILS5 文本 段 ? 
掌握 使 用 img 标记 来 设置 图 像 。 By 
掌握 使 用 <ul><ol> 标 记 来 设置 HTMLS 中 的 列表 。 
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SS 2.1 工作 场景 导入 


【工作 场景 】 


网 站 中 的 网 页 内 容 丰 富 多 彩 ， 有 有 文本、 图片 和 列表 等 信息 。 文 本 内 容 为 网 页 提供 了 丰 
富 的 信息 ; 网 页 中 的 图 像 不 仅 使 页 面 更 加 美观 ， 也 会 让 内 容 更 加 丰富 ;一 些 网 站 中 的 新 闻 ， 
导航 栏 都 是 采用 列表 来 排列 内 容 ， 应 用 非常 广泛 。 

下 面 制作 一 个 显示 文字 、 图 片 和 列表 排版 效果 的 页 面 。 

【引导 问题 】 

(1) 如 何 设置 文本 排版 效果 ? 

(2) 如 何 添 加 图 片 及 图 片 与 文本 的 排版 效果 ? 

(3) 如 何 设置 列表 ? 


“YS，2.2 HTML5 文件 的 基本 结构 标记 


一 个 HTML 文件 都 有 固定 的 结构 ，HTML 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 
文档 开始 标记 、 元 信息 、 主 体 标 记 和 页 和 面 注释 标记 。 在 HTML5S 文档 中 第 一 行使 用 
<IDOCTYPE html> 声明 这 个 文档 是 HTML5 文件 , 浏览 器 按照 HIMLS 准备 进行 解析 显示 。 
一 个 HTML 文档 都 是 以 <html> 开 始 ，<html> 结 束 ， 其 文档 结构 如 下 : 
<1DOCTYPEE HIMT> 
<html> 
<head> 
<meta charset="UTF-—-8"»> 
<title>HTNML 区 档 < /ALEiLILe> 
</head> 
<body> 
文档 的 内 容 是 .-.。.。.-。 
</body> 
</html> 


221 head 标记 


head 标记 用 于 定义 文档 头 部 元 素 。 位 于 <head> 内 部 的 元 素 可 以 包含 要 执行 的 脚本 、 
指引 浏览 占 找 到 样式 表 的 标记 以 及 文档 的 各 种 属性 和 信息 等 。 比 如 文档 的 标题 title、 网 页 信 
思 (meta) 的 名 称 、 关 键 字 、 作 者 等 。 
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2.2.2 title 标记 


<title> 标 记 定 义 文档 的 标题 。<title> 标记 在 所 有 HTML 文档 中 是 必需 的 。 它 是 页 面 被 
添加 a 到 收藏 夹 时 的 标题 ， 显 示 在 搜索 引擎 结果 中 的 页 面 标题 。title 标记 的 语法 格式 如 下 : 


<head> 
<title> 标 题 文字 </title> 
</head> 


【实例 2.1】 设 置 页 面 的 title 标题 ， 文 件 名 称 为 chapter2.1.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 第 一 个 网 员 </title> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.1.html， 页 面 效 果 如 图 2-1 所 示 。 


| 口 等 -人 


全 @ 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chapter2.1.html 信安 


图 2-1 设置 页 面 title 的 页 面 效 果 


2.2.3 ”body 标记 

body 标记 设置 定义 文档 的 主体 。 该 标记 里 面包 含 网 页 的 所 有 内 容 ， 比 如 文本 、 超 链接 、 
图 像 、 表 格 、 表 单 、 列 表 等 。 其 语法 格式 如 下 : 

<body> 网 页 内 容 </body> 


【实例 2.2】 设 置 页 面 的 body， 文 件 名 称 为 chapter2.2.html， 内 容 如 下 : 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


< DOCTYEE 了 tml1> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title>body 标记 </title> 
</head> 
<body> 
文档 的 内 容 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.2.html, 页 面 效 
果 如 图 2-2 所 示 。 J 


名 侣 | 器 127 站 总 .8020/ 竹 材 / 下 例 / 第 2 天 hapter2html = 


交 外 的 内 雁 


2.2.4 HTML 注释 标记 


在 HTML 脚本 代码 中 ， 使 用 <!-- 和 --> 标 记 来 对 
文档 进行 注释 , 两 标记 之 间 的 文本 是 文档 的 注释 内 容 ， 
其 内 容 不 会 被 显示 在 浏览 器 页 面 上 ， 在 文本 代码 编辑 
嚣 中， 或 在 浏览 器 中 使 用 “查看 源 代码 ”命令 打开 文 
档 时 ， 即 可 看 到 注释 。 

【实例 2.3】 设 置 注 释文 档 ， 文 件 名 称 为 chapter2.3.html， 内 容 如 下 : 

<1DOCTYPE html> 

<html> 

<head> 


<meta charset="UTF-—8"™"»> 
<title> 注 释 </title> 


2-2 设置 页 面 body 内 容 的 页 面 


</head> 
<body> 
a 
这 是 一 段 注释 内 容 ， 不 会 在 浏览 器 中 显示 。 
-一 > 
<h1> 注 释 代 码 </h1> 
</body> 
</html> 
在 浏览 磺 中 打开 网 页 文件 chapter2.3.html， C 个 @ 1 二 001.8020/ 玖 村/ 实 员 /着 QQ 人 | : 
页 面 效 果 如 图 2-3 所 示 。 


注释 代码 


225 meta 标记 


meta 标记 用 于 摘 述 有 关 页 面 的 元 信息 ， 比 
如 针对 搜索 引擎 和 更 新 频 度 的 摘 述 和 关键 词 。 图 2.3 设置 页 面 注释 的 效果 
<meta> 标记 位 于 文档 的 头 部 <head></head> 之 


第 2 章 HTML5 文件 的 基本 标记 


间 ， 不 包含 任何 内 容 。<meta> 标 记 的 属性 定义 了 与 文档 相关 联 的 名 称 / 值 对 。meta 标记 的 语 
法 格式 如 下 有 所 示 : 
<meta content=™ ™ http-equiv=" " name=™" " Charset ="™ "> 


meta 标记 有 三 个 可 选 属性 (http-equiv、name 和 charset(HTMLS 不 文 持 scheme) 和 一 个 必 
选 属性 (content)， 如 表 2-1 所 示 。 
表 2-1 meta 标记 的 属性 表 


属 性 此 述 
该 属性 设置 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 把 content 属性 关联 到 HTTP 头 部 
expires 设置 页 面 到 期 时 间 
refresh 设置 mn 秒 页 面 重 新 刷新 并 跳 转 
set-cookile 设 直 cookie 
author 设置 页 面 作者 
description 设置 页 面 的 描述 
keywords 设置 搜索 引擎 的 关键 词 
revised 定义 页 面 的 最 新 版 本 


Sy 定义 文档 的 字符 编码 


【实例 2.4】 设 置 页 面 的 name 和 http-equiv 相关 属性 ， 文 件 名 称 为 chapter2.4.html， 内 


http-equiv 


NAalne 


容 如 下 : 
<lIDOCTYPE html> 
<html> 
<head> 
<! 一 搜索 页 面 的 关键 字 --> 
<meta name="keywords"” content="meta 标记 总 结 meta 标记 "/> 
<1--- 页 面 作 者 一 -> 
<meta name="author" content="html 编辑 "/> 
<!-- 页 面 描述 --> 
<meta name="description" content=" 这 里 添加 对 页 和 面 的 描述 "/> 
<!-- 字符 编码 --> 
<meta http-egquiv="content-type" content="text/html; charset=UTE 一 8" /> 
<!-- 页 面 重 刷新 ，5 秒 后 刷新 并 跳 转 url 指定 的 网 址 --> 
<meta http—equiv—="refresh™” content—"5;U0RL="http://waw.njcit.cn'™ /> 
</head> 
<body> 
设置 页 面 的 name 和 http-equiv 属性 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.4.html， 页 面 效 果 如 图 2-4 所 示 。 
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六 127.0.0.1:8020y 教 材 / 实 [Xx 


GG 合 | @ 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /cha... 食 让 | : 


设置 页 面 的 name 和 http-equiv 属 性 


图 2-4 设置 页 面 的 name 和 http-equiv 属性 的 页 面 效 果 


2.2.6 style 标记 


style 标记 用 于 设置 HTML 文档 定义 样式 的 信息 ， 位 于 <head></head> 之 间 ，type 属性 
是 必需 的 ， 定 义 style 元 素 的 内 容 。 其 语法 格式 如 下 : 


<astvyvils type=™ textyjcsa"y> <Ystyle> 
【实例 2.5】 设 置 页 面 字 体 的 颜色 样式 ， 文 件 名 称 为 chapter2.5.html， 内 容 如 下 : 


<1DOCTYEE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>style 设置 </title> 
“Sitylie> 
body{color:red;} 
</style> 
</head> 
<body> 
hello world! 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.5.html， 页 面 效 果 如 图 2-5 所 示 。 


' 时 
YD style 设 和 置 X WW 
GG 全 | 人 @ 1270.0.1:8020/ 数 材 /实例 /第 2 章 /chapter2.5..， 全 安 


hello world! 


2-5 设置 页 面 style 的 效果 
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2.2.7 script 标记 


script 标记 用 于 设置 定义 客户 站 脚本 代码 。 比 如 JavaScript 脚本 。script 既 可 包含 脚本 
语句 ， 也 可 以 通过 "src" 属性 指 回 外 部 脚本 文件 。 其 语法 格式 如 下 : 
<script src=" 脚 本 文件 的 地 址 " > </script> 
或 者 
<script > 脚本 代码 </script> 
【实例 2.6】 设 置 页 面 执行 的 脚本 代码 ， 文 件 名称 为 chapter2.6.html， 内 容 如 下 : 


<1DOCTIYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 捅 入 JavaScript 脚本 代码 </title> 
<soript> 
alert ("hello world"™); 
</script> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.6.html， 页 面 效 果 如 图 2-6 所 示 。 


A 手 入 JavaScrnipt 膨 本 代码 Xx \ \ 


x 人 Ee 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chapter2.6 ..， 电 六 | : 


127.0.0.1:8020 显示 


hgllE world 
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2.2.8 link 标记 


link 标记 用 于 设置 文档 的 外 部 资源 ， 位 于 head 部 分 ，link 标记 没有 对 应 的 结束 标记 ， 
它 可 出 现任 何 次 数 ， 第 用 于 链接 样式 表 文 件 。 其 语法 格式 如 下 : 


<1ink re1L=" 当 前 文档 与 被 链接 文件 之 间 的 关系 " type=" 被 链接 文档 MIME 类 型 " href=" 外 部 
源 文件 的 地 址 " /> 
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link 标记 的 属性 如 表 2-2 所 示 。 
表 2-2 link 标记 的 属性 


alternate 
author 
help 
1con 
licence 
next 


rel pingback 定义 显示 外 部 样式 表 


prefetch 


prev 
search 
sidebar 
stylesheet 
tag 


type 


MIME type 
到 于 =， 
【实例 2.7】 设 置 文档 的 外 部 资源 ， 文 件 名 称 为 chapter2.7.html， 内 容 如 下 : 


<head> 
<link rel="stylesheet™ type="text/css™ href="css0] .css™ /> 
</head> 


2.2.9 base 标记 


<base> 标 记 用 于 设置 页 面 上 的 上 所 有 链接 的 默认 地 址 。<base> 标记 必须 位 于 head 元 素 
内 部 。 
【实例 2.8】 设 置 


<1IDOCITYPE Ptml> 
<htm]> 
<head> 
<metla Charset—"UTF—8"> 
<title>base</title> 
<base href="http://www.w3school .com.cn/1i/™ /> 
“hbase target—=" blank” /> 
</head> 
<body> 
<a href="#"> 单 击 该 文字 链接 到 默认 的 w3school</a> 
</body> 
</html> 


驮 认 链 接地 址 ， 文 件 名 称 为 chapter2.8.html， 内 容 如 下 : 
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在 浏览 器 中 打开 网 页 文件 chapter2.8.html， 页 面 效 果 如 图 2-7、 图 2-8 所 示 。 


: SS 一 0 x 3 
RR : ' = 一 一 
x 《加 x 》 站 403 - 蔗 IH5E x 人 


\ 
居 


本 


中 12700.18020/ 莪 车 / 诺 例 /第 2 言 /chapter28html 息 有 | : 本 ep 
COD 20/ 半 村 /实例 / 弟 25/chapter2 2 尺码 已 合 Ee Www.w3school.com.cn/i/é# 


服务 器 错误 


403 - 禁止 访问 : 访问 被 拒绝 。 


WW Ewaschooal 


密 无 检 使 用 所 提供 的 先 据 查看 此 目录 或 负面 . 


图 2-7 设置 客户 端 脚本 的 效果 图 2-8 设置 执行 客户 端 脚本 的 效果 


2.3 HTML5 文本 排版 


2.3.1 标题 


标题 文字 由 <hl> 一 <h6> 标记 定义 。<hl> 定义 的 标题 最 大 ，<h6> 定义 最 小 的 标题 ， 
依次 逐渐 减 小 。 具 体 语法 如 下 : 

<h1l align="” left|right|center"> 标 题 内 容 </h1l> 

【实例 2.9】 设 置 6 个 hl 一 hb6 标题 ,文件 名 称 为 chapter2.9.html， 内 容 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 标 题 标 记 </title> 
</head> 
<body> 
<h1> 这 是 标题 1</h1> 
<h2> 这 是 标题 2</h2> 
<h3> 这 是 标题 3</h3> 
<h4> 这 是 标题 4</h4> 
<h5> 这 是 标题 5</h5> 
<h6> 这 是 标题 6</h6> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.9.html， 页 面 效 果 如 图 2-9 所 示 。 
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,Te 


让 中 标题 标记 x Ww 
名 但 | 命 127.0.0.1:8020/ 救 材 /实例 /第 2 章 /chapter2.9.html LD 本 


这 是 标题 1 
这 是 标题 2 
这 是 标题 3 

| 这 是 标题 4 
这 是 标题 5 


这 是 标题 6 


2-9 设置 标题 标记 的 页 面 效果 


2.3.2 ”上段 党 


网 页 文档 内 容 可 以 分 成 各 干 段 沙 。 可 以 使 用 <sp></p> 标 记 来 定义 段 沙 。 其 语法 格式 如 下 : 
< dl1ign-—"lLeft|right|lcenter "3 段落 内 容 </p> 


其 中 align 属性 是 设置 段落 文字 内 容 的 对 齐 方式 ， 主 要 是 居 左 、 居 中 和 居 右 。 
【实例 2.10】 设置 网 页 文档 段落 格式 ， 文 件 名 称 为 chapter2.10.html， 内 容 如 下 : 


<TDOCTYPE html> 
<html> 
<head> 
<title> 段 洛 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<p> 春 眠 不 觉 晓 ，< /p> 
<p> 处 处 轩 暗 鸟 。</VP> 
<p> 夜 来 风雨 声 ，</p> 
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春 眠 不 铝 晓 ， 


<p> 花 落 知 多 少 。< /p> 
</body> 处 处 闻 啼 乌 。 
</html> 夜来 风雨 声 
在 浏览 器 中 打开 网 页 文件 chapter2.10.html， 花 落 知 多 少 。 
页 面 效果 如 图 2-10 所 示 。 
23.3 换行 与 水 平 线 2-10 ”使 用 <p> 标 记 划 分 段落 的 页 面 效 果 


<br> 标 记 是 HTML 标记 中 实现 在 页 面 中 插入 简单 的 换行 符 ， 其 是 单独 标记 ， 没 有 结束 
标记 。 
【实例 2.11】 使 用 <br>= 标 记 实 现 换行 效果 ， 文 件 名 称 为 chapter2.11.html， 内 容 如 下 : 
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<IDOCTYPE himl> 
<html> 
<head> 
<title> 换 行 </title> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-8"> 
</head> 
<body> 
春 虐 不 觉 晓 ，<br/> 
处 处 闻 啼 鸟 。<br/><br/> 
夜来 风雨 声 ，<br/> 
蓄 落 知 多 少 。<br/> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.11.html， 页 面 效 果 如 图 2-11 所 示 。 

<hr> 标 记 古 HTML 标记 中 实现 在 页 面 中 插入 一 条 水 平 线 分 割 线 ， 可 以 设置 该 线 的 宽度 
和 粗细 、 水 平 线 的 对 章 方式 。 其 语法 格式 如 下 : 

<hr SIZe—" " EN ™ B11gn ™" ™ 3 

其 中 ,属性 size 设置 水 平 线 的 粗细 ，width 设置 水 平 线 的 宽度 ，align 设 定 水 平 线 的 对 齐 


方式 。 
【实例 2.12】 使 用 <hr> 标 记分 割 标题 与 段 洲 ， 文 件 名 称 为 chapter2.12.html， 内 容 如 下 : 


<1DOCTYPE html» 
<htm]l> 
<head> 
<title> 水 平 线 </title> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-—8"> 
</head> 
<body> 
<h2> 标 题 </h2> 
<hr width = "100%" size = "5" align = "center™" noshade="noshade"/> 
<p> 段 落 </p> 
</body> 
</html> 


C 合 1@ 127.0.01:8020/ 骆 村 /实例 .QQ 让 | CG 合 | 加 1270.0.18020/ 教 材 /实例 钥 家 | : 


春 眠 不 觉 晓 ， 
处 处 闻 啼 鸟 。 标题 


俺 来 风雨 声 ， 
花 洛 吉 和 多少 。 


图 2-11 使 用 <br> 标 记 插入 换行 符 的 页 面 效果 图 2-12 使 用 <hr> 标 记 设 置 分 割 线 
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2.3.4 文本 格式 化 标记 


1. 修饰 字体 标记 <font> 


修饰 字体 标记 <font> 用 于 设置 文本 的 了 字体、 尺寸 、 闫 色 。 
【实例 2.13】 使 用 <fon 标 记 控制 文本 的 显示 效果 ， 文 件 名 称 为 chapter2.13.html， 内 


容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<title>font 的 使 用 </title> 
<meta http-equiv="content-type™" content="text/nhntml;charset=UTF-8"> 
</head> 
<body> 
<font color = "#0066FF"> 颜 色 为 #0066FF</font><br/> 
<font Size TI coolor = red 字号 是 2 号 w/tFont Sbriy 
<Font alize=™+2" COLOE "rgb(255,0,.255)"»> 字 号 要 太 2 号 15 号 j<y tont><briy 
<font face = "方正 姚 体 "> 字 体 为 方正 姚 体 </font><br/> 
<font face = "黑体 ， 方正 姚 体 ， 仿 宋 "> 指 定 多 个 字体 </font> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.13.html， 页 面 效 果 如 图 2-13 所 示 。 


G 合 | @ 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /.. 


颜色 为 #0066FF 


字 呈 是 2 号 


字号 要 六 2 与 (5 与 ) 
字体 为 方正 姚 休 
指定 多 个 字体 


2-13 ”使 用 <font> 标 记 设 置 文本 的 页 面 效 果 
2. 修饰 文字 的 标记 
修 钱 文字 的 标记 有 粗 体 字 标 记 <B>、 和 斜体 字 标 记 <i>、 市 下 划 线 的 标记 <u>、 上 标 标 记 


<sup>、 下 标 标记 <sub>。 
另 有 儿 个 特殊 符号 : 小 于 号 用 &lt; 表 示 ， 大 于 号 用 &gt; 表 示 ， 与 用 &amp; 表 示 ， 双 引号 


用 &quot 表 示 ， 衬 格 用 &nbsp: 表 示 。 
【实例 2.14】 使 用 修饰 文字 的 标记 控制 文本 的 显示 效果 ， 文件 名 称 为 chapter2.14.html， 


内 容 如 下 : 
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<IDOCTYPE html> 
<html»> 
<head> 
<title> 粗 体 、 和 斜体 等 应 用 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<b> 这 是 加 粗 </b><br/> 
<1> 这 是 制 体 </ i><bry> 
<u> 这 是 下 划 线 ， 不 建议 使 用 </u><pr/> 
<del> 这 是 删除 线 </del><br/> 
这 是 <sub> 下 标 </ sub><br/> 
这 是 <sup> 上 标 </sup><br/> 
宝 gnbsp; &nbsp; &nbsp; gnbsp; 格 <br/> 
小 于 写 &1t;<br/> 
大 于 号 &qt;<bry> 
amBs<bri> 
双 引 号 &quot; <br/> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.14.html， 页 面 效果 如 图 2-14 所 示 。 


图 2-14 ”使 用 修饰 文字 的 标记 设置 文本 的 页 面 效 果 


3. 原始 排版 标记 <pre> 和 <code> 


原始 排版 标记 <pre> 和 <code> 用 于 设置 文本 的 原始 效果 ， 这 些 标 记 用 来 定义 预 格式 化 的 
文本 ,一 般 情况 下 ， 文 中 任何 额外 的 空白 字符 常常 被 浏览 器 忽 略 ， 但 可 以 使 用 <pre></pre> 
标记 保留 这 些 字 符 ， 按 照 原始 的 排列 方式 显示 。 

【实例 2.15】 使 用 <pre></pre> 和 <code></code> 标 记 控 制 文本 的 显示 效果 ， 文 件 名 称 为 
chapter2.15.html， 内 容 如 下 : 

<1DOCTYPE html> 


<html»> 
<head> 
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<title>pre</title> 
<meta http-egquiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<pre> 
H 
E 
五 
L 
O 
</pre> 
</html> 


2.3.5 div 与 span 标记 


一 般 HIML 元 系 分 为 块 级 元 素 和 内 联 元 素 。 块 级 元 素 在 浏 讽 厚 中 巡 示 时 垂直 排列 ， 通 
种 会 以 新 行 来 开始 ;内 联 元 妹 即 行内 元 素 ， 通 币 在 浏 抠 兰 中 显示 是 水 平 排列 的 。 例 如 : div 


为 块 级 元 素 ，span 为 行内 元 素 。 
【实例 2.16】 使 用 div、span 控制 页 面 的 显示 效果 ， 文件 名 称 为 chapter2.16.html， 内 容 


如 下 : 
“DOCTYPE html> 
<html> 
<head> 
<title>div 和 span</title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<span> 春 虑 不 党 蛇 ，</span> 
<span> 处 处 闻 啼 乌 。</span> 
<div> 夜 来 风雨 声 ，< /div> 
花 落 知 多 少 。 
</body> 
</htm]l> 


在 浏览 器 中 打开 网 页 文件 chapter2.16.html， 页 面 效果 如 图 2-15 所 示 。 


MN: 


春 眠 不 铝 喀 ， 处 处 闻 啼 乌 。 


夜来 风雨 声 ， 
花 落 知 多 少 。 


图 2-15 使 用 <div> 、<span> 标 记 设 置 文本 的 页 面 效果 
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二 2.4 HTML5 图 像 


网 页 中 第 见 的 网 络 图 像 格 式 包 括 : GIF(Graphics Interchange Formab， 扩 展 名 为 .gif， 是 
一 种 被 压缩 过 的 图 像 格 式 ， 只 支持 256 种 颜色 ， 但 可 以 制作 透明 图 片 和 GIF 动画 ; 
JPEG(Joint Photographic Experts Group)， 扩 展 名 为 .jpg 或 jpeg， 有 损 压 缩 方 式 ， 不 适合 表现 
线条 男 或 文字 图 像 ， PNG(Portable Network Graphics)， 扩 展 名 为 png， 称 为 可 移动 网 络 图 像 ， 
兼 有 GIF 和 JPEG 的 色彩 模式 ，PNG 不仅 能 储存 256 色 以 下 的 图 像 ， 最 局 可 储 行 至 48 位 超 
强 色 彩 图 像 。 


2.4.1 <img> 标 记 


在 网 页 中 插入 图 像 ， 其 语法 格式 如 下 : 
<img src=" 图 像 文件 url" alLt=" 蔡 代 文 本 " width /> 
src 属性 设置 为 要 插入 图 像 文件 的 URL，URL 既 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 。 
alt 属性 设置 为 在 浏览 右 无 法 载 入 图 像 时 ， 浏 览 句 将 显示 这 个 葵 代 性 的 文本 而 不 是 图 像 。 此 
标记 的 属性 如 表 2-3 所 示 。 
表 2-3 img 标记 的 属性 
属 性 描 述 
该 属性 设置 图 片 的 URL 地 址 ， 可 以 用 绝对 地 址 、 相 对 地 址 表示 
height 该 属性 设置 图 片 的 高 度 


width 宽度 值 (px) 该 属性 设置 图 片 的 宽度 
| 


ei 该 属性 设置 将 图 像 定 义 为 客户 器 端 图 像 映射 


i 该 属性 设置 将 图 像 规 定 为 服务 器 端 图 像 映射 


【实例 2.17】 使 用 <img>= 标 记 在 页 面 上 插入 图 片 , 文件 名 称 为 chapter2.17.html， 其 中 图 
片 与 该 html 文件 在 同一 目录 下 的 img 文件 夹 中 ， 内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<title> 插 入 图 像 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 


</head> 
<body> 
Im Sre="ing/tace pg a Ss "PE 有" 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.17.html， 页 面 效 果 如 图 2-16 所 示 。 
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) 口 揪 入 图 像 X 是 


了 


已 全 | 名 127.0.0.1:8020/ 教 材 /实例 /第 2... 


图 2-16 设置 图 片 的 效果 的 页 面 效 果 


2.4.2 <map> 标 记 、usemap 属性 


在 网 页 中 插入 疼 片 ， 使 用 <map> 定 义 一 个 客户 靖 图 像 映 射 。 使 用 usemap 属性 将 图 像 定 
义 为 客户 站 图 像 映 射 。 图 像 映 射 指 的 是 市 有 可 点 击 区 域 的 一 幅 图 像 。<map> 元 素 应 该 市 有 id 
和 name 两 个 属性 。<area> 元 素 可 定义 图 像 映 射 中 的 区 域 丛 和 套 在 map 元 系 内 部 。 

usemap 属性 值 与 <map> 元 素 的 name 或 id 属性 相关 联 , 以 建立 <imsg> 与 <map> 之 
间 的 关系 。 

【实例 2.18】 使 用 <map> 标 记 定 义 一 个 客户 闹 图 像 映 册 ， 文 件 名 称 为 chapter2.18.html， 
内 容 如 下 : 


<IDOCTYPE html> 
<htm]l> 
<head> 
<tit1le> 客 户 端 图 像 映 射 </tit1le> 
<meta http-equiv="content-type™" content="text/html; 
charset—UTFE=8"»> 
</head> 


<body background = "http://www.w3school.com.cn/i/eg bg 04.9g1f"> 
<p> 请 单 击 图 像 上 的 星球 ， 把 它们 放大 。</p> 
<1mg src="img/eg planets.Jpg" usemap="#planetmap" alt="Planets™ /> 
<map name="planetmap" 1id="planetmap"> 
<area Shape="circle™" coords="]180,139,14" 
href =—"chapter2.181.himl™" Larget =" blank™” alt—"Venus™ J 
<area shape="circle™" coords="]29,161,10" 
href —"chapter2.182.htnmnt™" Target =" blank™” alto—"Mereury™ {3S 
<area Shape="rect™ coords="0,0,110,260"™ href ="chapter2.183.html™ 
target 一” lhlank™ alt—~"sSun” £> 
</map> 
<p><b> 注 释 : </b>img 元 素 中 的 "usemap” 属性 引用 map 元 素 中 的 "id" 或 "name" 
属性 (根据 浏览 器 ) ， 所 以 我 们 同时 间 map 元 素 添 加 了 "id" 和 "name" 属性 。</p> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter2.18.html， 点 击 图 片上 的 区 域 链接 ， 页 面 效 果 如 
2-17、 图 2-18 所 示 。 


/中 客户 这 图 像 丙 射 x 二 


GC 和合 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chapter2.18.h..， 全 三 


请 单 击 图 像 上 的 给 球 ， 把 它们 放大 。 


7 口 127.0.0.1.8020/ 教 材 / 实 | x WW 


CG 全 | 加 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chapte… 和 驴 六 


图 2-18 单 击 图 片区 域 的 页 面 效果 
SA 2.5 HTML5 列表 


在 HIMLS 网 页 文件 中 ， 列 表 是 一 种 非常 适用 的 数据 排序 方式 。HTMLS 支持 的 列表 分 
为 有 序列 表 、 无 序列 表 、 髓 套 列 表 和 定义 列表 等 。 


251 有 序列 表 


<ol></ol> 标 记 用 于 定义 有 序列 表 。 列 表 项 中 使 用 编号 来 记录 项 目的 顺序 。 列 表 的 语法 
格式 如 下 : 


<O1 type=" 排 序 类 型 " start=" 起 始 数 值 " > 
<1i> 列 表 项 1</1i> 
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<11> 列 表 项 2</11i> 


三 和 本 和 和 看 归 本 硬 和 本 汪 二 本 硬 量 


其 中 <li><Ai> 代 表 的 是 列表 项 。 
其 对 应 的 有 序列 表 的 属性 如 表 2-4 所 示 。 


表 2-4 ol 有 序列 表 标 记 的 属性 


属 性 描述 
该 属性 设置 列表 的 序号 为 1,2,3,… 形 式 
该 属性 设置 列表 的 序号 为 A,B,C,D,… 形 式 
该 属性 设置 列表 的 序号 为 a,b,c,d,… 形 式 
该 属性 设置 列表 的 序号 为 LILIIL… 形 式 

i 该 属性 设置 列表 的 序号 为 二 十 ,…… 形 式 
start 数值 该 属性 设置 列表 序号 的 起 始 值 


【实例 2.19】 使 用 <ol> 标 记 设 置 有 序列 表 ， 文 件 名 称 为 chapter2.19.html， 内 容 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<title> 有 序列 表 </title> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-—8"> 
</head> 
<body> 
从 1 开始 的 有 序列 表 : 
<Ol> 
<1i> 咖 啡 </1i> 
<1i> 牛 奶 </1i> 
<1i> 茶 </1i> 
</ol> 
从 50 开始 的 有 序列 表 : 
< SEark" mS 
<]11i> 晤 啡 </1i> 
5 十 明 SAL5 
<1i> 共 </1i> 
</01> 
字母 编号 的 有 序列 表 : 
<Ol type = "a"y> 
<1i> 咖 啡 </1i> 
Sis- Li 
<1i> 共 </1i> 
</oOl> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.19.html， 页 面 效 果 如 图 2-19 所 示 。 


type 
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/中 有 序列 表 x 一 


人 


分 oo 127.0.0.1:8020/ 教 材 / 空 例 /第 2 章 /chapter2.19.html 及 二 ] : 
从 1 开始 的 有 序列 表 : 


1. 咖啡 
2. 牛奶 
3. 茶 


从 50 开 始 的 有 序列 表 : 


50. 咖 味 
51. 牛奶 
52. 条 


字 和 母 凯 号 的 有 序列 表 : 


a. 咖 哇 
b. 牛奶 
Cc. 茶 


图 2-19 设置 有 序列 表 的 页 面 效 果 


2.5.2 无 序列 表 


<uUl><mul> 标 记 用 于 定义 无 序列 表 。 列 表 项 中 使 用 type 来 记录 项 目的 顺序 。 列 表 的 语法 
格式 如 下 : 
<ul type=" 列 表 的 项 目 符号 的 类 型 "> 
<1i> 列 表 项 1</1i> 
<1i> 列 表 项 2</1i> 


其 中 <]i> </i> 代 表 的 是 列表 项 。 
其 对 应 的 无 序列 表 的 属性 如 表 2-5 所 示 。 


表 2-5 ul 无 序列 表 标 记 的 属性 


站 描述 
不 赞成 使 用 。 请 使 用 样式 取代 它 
i 使 用 粗 体 圆 点 进行 标记 
Cc 


使 用 空心 小 矩形 进行 标记 
使 用 实心 黑 点 进行 标记 


【实例 2.20】 使 用 <ul> 标 记 设 置 无 序列 表 ， 文 件 名 称 为 chapter2.20.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"»> 
<title> 无 序列 表 </title> 
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</head> 
<body> 
<h4> 无 序列 表 :</h4> 
< > 
<11i>Coffee</11> 
<11>Tea</l11> 
<11>MI1kK</113 
</ul> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.20.html， 页 面 效 果 如 图 2-20 所 示 。 


GCG 全 |@ 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chpater2.20.html 电信 | : 


无 序列 表 : 


。 Coffee 
es Tea 
. Milk 


2-20 设置 无 序列 表 的 页 面 效 果 


2.5.3 角 套 列表 


列表 是 可 以 众 套 的 ， 无 序列 表 中 藤 套 有 序列 表 或 无 序列 表 等 ， 有 序列 表 也 可 以 通 僚 无 
序列 表 或 者 无 序 。 

【实例 2.21]】 使 用 <ul>、<o 上 > 标记 设置 租 套 列表 ， 文 件 名 称 为 chapter2.21.html， 内 容 
如 下 : 


<IDOCTYPEE. himls 
<html> 
<head> 
<title> 髓 套 列表 </title> 
<meta http-equiliv="content-type" content="text/html; charset=UTF-8"> 
</head> 
<body> 
<h4> 一 个 檬 套 列表 : </h4> 
<uUul> 
<1i> 咖 啡 </1i> 
<1i> 茶 
<uUul> 
<1i> 红 茶 </1i> 
jy 
</ul> 
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</{11> 
<1i> 和 牛奶 </1i> 
</ul> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter2.21.html， 页 面 效 果 如 图 2-21 所 示 。 


bb 


x 全国 


GG 他 | 人 @ 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /... 


一 个 嵌 套 列表 : 
。 号 0 时 E 
。 余 


已 


。 和 牛奶 


图 2-21 设置 散 套 列表 的 页 面 效 果 


2 


定义 列表 通常 用 于 定义 名 词 或 者 概念 ， 类 似 名 词 解释 的 内 容 。 每 一 个 子 项 由 两 部 分 组 
成 ， 第 一 部 分 是 名 词 或 者 是 概念 ,第 二 部 分 是 相应 的 解释 和 描述 。 自 定义 列表 以 <dl> 标记 
开始 ， 每 个 自 定义 列表 项 以 <dt> 标记 开始 ， 每 个 自 定 义 列表 项 的 定义 以 <dd> 标记 开始 。 
其 语法 格式 如 下 : 


<dl> 

<dt> 和 名 词 或 者 概念 1</dt> 
<dd> 解 释 和 描述 内 容 </dd> 
<dt> 名 词 或 者 概念 2</dt> 


二 硬 二 国 丰 二 国 蛋 二 看 和 本 量 由 本 硬 二 国 各 


【实例 2.22】 使 用 <ulj>、<oP> 标 记 设 置 仍 父 列 表 ， 文 件 名 称 为 chapter2.22.html， 内 容 
如 下 : 


<IDOCTYPE html> 
<head> 
<title> 定 义 列表 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<h2> 一 个 定义 列表 : <Jh23 
< 加 | > 
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<dt><b> 计 算 机 </b></dt> 
<dd> 用 来 计算 的 仪器 ... ...</qdqd> 
<dt><b> 广 示 毅 </b></dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ... ...</dd> 
</dl> 
</body> 
</hntml> 


在 浏览 器 中 打开 网 页 文件 chapter2.22.html， 页 面 效 果 如 图 2-22 所 示 。 


G 合 | 127.0.0.1:8020/ 教 材 /实例 /第 2 章 /chap.. 


一 个 定义 列表 : 


计算 机 
用 来 计算 的 仪器 .… .… 
显示 楷 
以 视 铭 方式 显示 信息 的 沪 置 … .… 


图 2-22 设置 定义 列表 的 页 面 效 果 
< 人，2.6 回 到 工作 场景 


通过 2.2~2.5 节 内 容 的 学 习 ， 已 经 学 习 了 HTMLS5 基本 的 结构 标记 、HTMLS5 文本 排版 
标记 的 使 用 ， 以 及 HIMLS 图 像 和 列表 的 插入 等 。 午 握 使 用 这 些 基 本 标记 来 设 兽 负面， 下面 
是 综合 实例 。 

【工作 过 程 】 显 示 文 字 、 图 片 和 列表 排版 效果 。 

创建 网 页 ， 文 件 名 为 chapter2.23.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 访 调 大 世界 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body background = "img/back.g1if"> 
<h1> 欢 迎 来 到 及 调 大 世界 </h1> 
<h3> 苑 性 </h33 
<O1> 
<1iS 人 ein SFE Tig/28. ng" alt =m" hopace "id Bonmerm =" />ZaS 
竹 郑 ; <brjS> 
<p> 竹 算是 竹子 的 新 校 ， 呈 象牙 色 。 厂 泛 制作 成 铅 装 竹 符 ， 新 鲜 竹 敌 价 格 较 贵 ， 并 有 季节 
性 </p> 
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</11> 
<1ix<imd sre = "imglbyg. jpg” alt. =™mTT" hospace="10"/3 开 由 人 久 填 : <bBry3 
<p> 在 吐 司 或 饼干 等 的 基础 上 制作 出 的 一 种 开 骨 食品 </P> 
ES 
<1Tix<imd sre = "MimngfibB. bg" alt. >" hb"™ nspace="™10"/3W by <br/3 
<p> 一 种 流行 的 根 业 类 ， 也 称 为 大 白 葛 上 政 ， 质 地 很 硬 ， 需 要 苛 很 长 时 间 </p> 
il1l3 
<iol> 
</body> 
</nhntml> 


在 浏览 器 中 打开 网 页 文件 chapter2.23.html， 页 面 效果 如 图 2-23 所 示 。 


y 六 亭 调 大 世界 
心 各 | 四 127.0.0.1:8020/ 杉 材 / 实 例 / 第 2 章 /chapter2.23.html 


欢迎 来 到 受 调 大 世界 


全 笋 是 竹本 的 新 核 ， 三 象 才 色 。 广 之 制作 成 谎 攻 人 竹笋， 新 圩 竹笋 体格 较 贵 ， 并 有 和 驰 性 


人 3 
2. 开 骨 饼干 : 


在 吐 司 或 饼干 等 的 基础 上 制作 出 的 一 种 开 骨 食品 


3. > 


一 种 流行 的 根 药 汰 ， 也 称 为 大 有 自 莫 个 ， 夺 地 很 便 ， 需 要 意 很 长 时 间 


图 2-23 图 文 列表 效果 图 
<*8，2.7 工作 实 训 营 


2.7.1 ”训练 实例 一 一 制作 一 个 显示 文字 、 图 片 和 列表 排版 效果 的 页 面 


1. 训练 内 容 
自行 设计 一 个 页 面 ， 页面 中 有 文本 、 图 像 和 列表 ， 网 页 围绕 一 个 主题 设计 内 容 。 
2. 训练 目的 


> 午 握 文本 排版 的 方式 。 
掌握 图 片 的 设置 。 
掌握 图 文 并 戊 的 设置 。 
掌握 列表 的 使 用 及 设置 。 


Vv YY Y 
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3. 训练 过 程 

参照 2.3 一 2.5 节 中 的 案例 操作 步骤 。 

4. 技术 要 点 

多 片 的 选择 、 图 文 并 成 的 排版 设置 。 


本 ， 龟 Er, 
1 土 忌 


2.7.2 工作 实践 常见 问题 解析 


【第 见 问 题 1】 为 什么 初学 者 网 页 的 图 片 大 小 选择 不 合适 ? 

【 答 】 要 达到 合适 的 分 辨认 和 矿 寸 ， 需 要 采用 专门 的 图 片 处 理 软件 来 处 理 。 

【第 见 问题 2】 为 什么 学 习 到 目前 为 止 , 网 页 的 文本 和 图 片 之 间 的 排版 布局 还 是 达 不 到 
我 们 希望 的 效果 ? 

【 答 】 这 个 需要 后 期 学 习 样 式 表 CSS 属性 来 设 定 。 


Aa% 2.8 本 章 小 结 


网 页 的 页 面 效 果 丰 富 多 彩 ， 布 局 主 次 分 明 、 图 文 并 成 ， 往 往 是 通过 控制 文字 和 图 片 的 
排版 效果 等 来 实现 的 。 

文档 中 的 文字 字体 标记 <fon 人 可 以 控制 文字 的 大 小 、 颜 色 和 字体 ; 字符 格式 化 标记 有 加 
粗 <b>、 笠 体 <i>、 下 划 线 <u>、 上 标 <sub>、 下 标 <sup>， 删 除 线 <del>; 特殊 字符 的 表示 法 :: 
如 空格 用 &nbsp:; 表 示 ， 小 于 号 < 用 &&lt: 表 示 ， 大 于 号 > 用 &gt: 表 示 ， 双 引号 用 太 quot: 表 示 。 

段落 格式 化 标记 <p> 用 于 设置 段落 : <div> 用 于 设置 块 元 素 ，<span> 用 于 设置 行 元 素 。 

标题 标记 使 用 <h1> 到 <h6>( 字 体 大 小 逐次 减 小 ) 来 设 定 ; 换行 标记 使 用 <br>、 水 平 线 标记 
使 用 <hr>。 

通过 <ol> 标 记 可 设置 有 序列 表 , <u> 标 记 可 设置 无 序列 表 , <]i> 标 记 可 设置 具体 列表 项 ; 
通过 <dl>、<dd>、<dt> 设 置 定义 列表 。 


YX2 2.9 习 题 


1. 在 HIML 语言 结构 中 ，(  ” ) 是 用 来 指定 文件 的 主体 ,文字 、 图 形 、 图 像 、 链 接 、 


动画 和 视频 。 
A. <html></html> B. <body></body> 
C. <head></head> D. <title></title> 
2. 当 浏 览 器 不 能 正常 显示 图 像 时 ， 会 在 图 像 的 位 置 显示 内 容 的 (  )。 
A. 目标 位 置 B. 替代 文本 C. 地 图 D. 低 品 质 源 
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3. HTML 标记 中 用 于 设置 背 示 闫 色 的 属性 是 (  )。 

A. alink B. vlink C. bgcolor D. backeround 
4、 创建 黑体 字 的 文本 标记 是 ( 。。“). 

A. <pre></pre> B. <hl></h1> C. <h6></h6> D. <b=></b> 
5. 设置 水 平 线 高 度 的 HTML 代码 是 ( ” )。 

A. <hr> B. <hr s17e—?> C. <hr width=?>  D. <hr noshade> 


二 、 填 空 题 
1. HTML 网 页 文件 的 标记 是 ， 网 页 文件 的 主体 标记 是 ， 标示 


页 面 标题 的 标记 是 ” _  ， 
2. 在 网 页 中 插入 背景 图 案 ( 文 件 的 路 径 及 名 称 为 /img/backsground.jpg) 的 语句 是 


3. 表示 空格 特殊 符号 的 是 ， 定 义 下 标的 标记 是 <sub>， 定 义 上 标的 标记 


是 

4. 在 HTML 中 有 有效、 规范 的 注释 声明 是 

5. 自 定义 列表 以 ”  _ 标记 开始 ， 每 个 自 定义 列表 项 以 开始 每 个 自 定义 
列表 项 的 定义 以 开始 ， 


三 、 操 作 题 
创建 网 页 ， 文件 名 为 ex2.1.html， 页 面 效 果 如 图 2-24 所 示 ， 


EE 


C 全 | filey//D;yYIbh 上 课 资 料 / 优 质 课程 建设 /网 页 设计 王 讲 /实验 1/b/b.html 食 


条 ( 禾 本 科 竹 属 植物 ) 


1. 共生 型 ,就 是 母 竹 基 部 的 牙 繁 殖 新 体 ， 包 括 : 


可 巾 避 了 区 于 里 


是 由 凌 根 上 的 牙 繁 歼 新 性， 包括 : 


3. 混 生 型 ， 就 是 既 由 母 竹 基部 的 芽 繁殖 ， 叉 能 M17 窗 根 上 的 芽 繁殖 ,， 


。 苦 竹 
。 棕 竹 
。 入 人 竹 


图 2-24 ”图 文 列表 效果 图 


国 table、tr、 也 、td、caption 标记 
国 cellspacing、cellpadding 属性 
图 ”colspan、rowspan 属性 


图 ”掌握 使 用 表格 标记 来 制作 表格 。 
图 ”掌握 表格 各 种 标记 的 灵活 使 用 ， 
国 ”掌握 使 用 表格 来 进行 页 面 布局 。 
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AS 3.1 工作 场景 导入 


【工作 场景 


表格 在 网 页 的 设计 和 制作 中 有 看 非常 广泛 的 应 用 。 蛙 元 格 中 不 仅 可 以 存放 数据 、 文 本 ， 
还 可 以 存放 图 片 、 超 链接 等 页 面 元 素 。 表格 的 一 个 非常 竺 要 的 应 用 就 是 对 要 显示 的 内 容 进 


行 合 理 的 布局 。 
下 面 需要 制作 网 页 《我 的 家 乡 》， 采 用 表格 及 表格 租 套 完成 整体 网 页 布局 。 
【引导 问题 】 


(1) 怎样 创建 表格 ? 
(2) 怎样 设置 表格 格式 ? 
(3) 怎样 使 用 表格 进行 页 面 合理 布局 ? 


AS 3.2 表格 创建 


表格 是 由 <table> 标 记 开 始 ，</table> 标 记 结 束 。 定 义 表 格 的 基本 语法 如 下 : 


<table> 
<caption> 表 格 标题 </ caption> 
<tr> 
<td> 单 元 格 内 容 </td> 
jir> 
</table> 


<caption>...</caption> 定 义 表 格 的 标题 ，<tr>...</tr> 定 义 表 格 的 一 行 ，<td>...</td> 或 
<th>...</ 耻 > 定义 表格 的 一 个 单元 格 。<td>...</td> 定 义 普 通 蛙 元 格 ，<th>...</th> 定 义 标题 单 
元 格 。 标 题 早 元 格 献 认 加 粗 水 平 居 中 显示 。<table>...</table> 中 可 以 包含 多 对 <tr>...</tr>， 
<tr>...</tr> 中 可 以 包含 多 对 <td>...</td>。 

要 显示 表格 的 边框 不 得 不 提 到 border 属性 ，border 属性 用 于 设置 表格 边框 的 宽度 ， 单 
位 像素 ， 默 认 值 为 0， 也 就 是 默认 不 显示 边框 。 

【实例 3.1】 表 格 实 例 ， 文 件 名 称 为 chapter3.1.html， 内 容 如 下 : 


< DOCITYEE htmil»> 


<html> 

<head> 
<meta charset="UTF—8"»> 
<title> 表 格 </title> 

</head> 

<body> 
<table border="] "> 

<caption> 学 号 姓名 对 照 表 </caption> 
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< 
<th> 学 写 </th> 
<th> 姓 名 </th> 

</tr> 

<tr> 
<td>170430101</td> 
<td> 陆 妍 霖 < /td> 

</tr> 

<tr> 
<td>1710430102</td> 
< 七 da> 骨 玉芝 </td> 

</tr> 

</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.1.html， 页 面 效果 如 图 3-1 所 示 ， 从 页 面 效 果 可 以 看 
出 表格 在 不 设置 客 度 时 ， 表 格 冤 度 是 目 适 应 的 。 表 格 的 标题 默认 显示 在 表格 上 方 。 
【实例 3.2】 添 加 表格 行 ， 文 件 名 称 为 chapter3.2.html， 内 容 如 下 : 


<IDOCTYPE hml> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 表 格 </title> 
</head> 
<body> 
<table border="1]"> 
<caption> 学 号 姓名 对 照 表 </caption> 
<tr> 
<th> 学 写 </th> 
<th> 姓 名 </th> 
过 站 芋 下 六 
<tr> 
<td>1710430101</td> 
<td> 陆 妍 霖 </td> 
fir 
2 
<td>170430102</td> 
<td> 冒 玉蓉 </td> 
</tr> 
< 
<td>1i17170430103</td> 
<td> 绢 诗 瑶 </td> 
Er 
</table> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter3.2.html， 页 面 效 果 如 图 3-2 所 示 。 


z 避 口 x 心 口 
六 表格 x 六 表格 x 
Ee 127.0.0.1:8020/chapter3/chapte... 宜 : 人 Ke 127.0.0.1:8020/chapter3/chapte...， 灾 
应 用 六 :3 应 用 癌 
学 号 姓名 对 照 表 学 号 姓名 对 照 表 
| 学 号 |[ 姓 名 | | 学 号 | 姓名 
1 70430101 | 陆 妍 霖 [ 70430101 | 陆 妍 霖 
|170430102| 冒 玉 车 
[ 704301 03| 虹 诗 瑶 


图 3-1 学 号 姓名 对 照 表 的 页 面 效果 图 3-2 添加 表格 行 之 后 的 页 面 效 果 
【实例 3.3】 添 加 表格 列 ， 文 件 名 称 为 chapter3.3.html， 内 容 如 下 : 


<IDOCTYPE html»> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 文字 深 动 的 次 数 </title> 
</head> 
<body> 
<table border="]"> 
<caption> 学 号 姓名 对 照 表 </caption> 
<tr> 
<th> 学 写 </th> 
<th> 姓 名 </th> 
<th> 年 龄 </th> 
</try 
< 
<td>1710430101</tad> 
<td> 陆 妍 霖 < /td> 
<td>19</td> 
<itry 
St 
<tds1i10430102</td> 
<td> 冒 玉 荐 </td> 
<td>18</td> 
flr 
<tr» 
<tqd>110430103</td> 
<td> 绢 诗 瑶 </td> 
加 二 > 
< /tr 
</table> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter3.3.html， 页 面 效 果 如 图 3-3 所 示 ， 从 页 面 效 果 可 以 看 
出 普通 单元 格 默 认 拓 左 显示 。 
© 口 
口 表格 X 
| GC OO © 127.0.0.1:8020/chapter3/chapte... 
::s 应 用 口 
学 号 姓名 对 照 表 


图 3-3 ”添加 表格 列 的 页 面 效果 
Se，3.3 ”表格 设置 


3.3.1 表格 宽度 和 高 度 


表格 宽度 使 用 属性 width 设置 ， 用 单位 像素 或 者 用 占 浏 览 器 窗口 宽度 的 百分比 来 表示 。 
例如 设置 width="300"， 表 示 表 格 宽度 是 固定 值 300 个 像素 ， 而 width="30%" 则 表示 表格 宽 
度 占 浏览 器 窗口 宽度 的 30%， 会 随 着 浏览 器 窗口 宽度 的 变化 而 变化 。 表 格 高 度 使 用 属性 
height 设置 , 用 单位 像素 或 者 用 占 浏览 器 窗口 高 度 的 百分比 来 表示 。 例如 设置 height="300"， 
表示 表格 高 度 是 固定 值 300 个 像素 。 在 新 版 本 的 浏览 器 中 ， 我 们 上 友 现 使 用 百分比 设置 表格 
高 度 时 ， 表 格 的 实际 显示 高 度 是 自 适 应 的 ， 不 会 随 着 浏览 器 窗口 高 度 的 变化 而 变化 。 
【实例 3.4】 设 置 表格 固定 尺寸 ， 文 件 名 称 为 chapter3.4.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 设 置 表格 固定 尺寸 </title> 
</head> 
<body> 
<table border="1" width="300™ height="200"> 
<tr> 
<th> 学 写 </th> 
<th> 姓 名 </th> 
</tr> 
LT» 
<td>170430101</tdqd> 
<td> 陆 妍 霖 < /td> 
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tr 

上 
<td>170430102</td> 
<td> 冒 玉蓉 </td> 

</tr> 

</table> 
</body> 
</html> 


在 浏览 右 中 打开 网 页 文件 chapter3.4.html， 页 面 效果 如 图 3-4 所 示 。 从 页 面 效 果 可 以 看 
出 表格 的 太 寸 是 固定 的 ， 没 有 随 看 浏览 此 窗口 的 变化 而 变化 。 


人 3 国 汪 EE , | 中 


DD 127.0.0.1:8020/chapter x 
[20 x 


GG 全 | 127.0.0.1:8020/chapter3/chapter3.4.html 玄 ; 
:应用 站 已 OO1270.01:8.， 雯 


:应 用 口 


|” 
170430101 


3-4 “设置 表格 固定 尺寸 的 页 面 效果 
【实例 3.5】 设 置 表格 百分比 尺寸 ， 文 件 名 称 为 chapter3.5.html， 内 容 如 下 : 


<IDOoOCTYPE html> 
<htm]> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 表格 百分比 尺寸 </title> 
</head> 
<body> 
<table border="1"” width="50%" height="80$%"> 
< 
<th> 学 写 </th> 
<th> 姓 名 </th> 
< {tr> 
<Ttr> 
<td>110430101</td> 
<td> 陆 妍 宁 </td> 
EE 
<tr> 
<td>170430102</tdqd> 
<td> 冒 玉芝 </tqd> 
人 <tr 
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</tabley> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.5.html， 页 面 效 果 如 图 3-5 所 示 。 从 页 面 效果 可 以 看 
出 表格 的 宽度 尺寸 是 变化 的 ， 随 着 浏览 器 窗口 的 变化 而 变化 ， 而 表格 的 高 度 是 自 适 应 的 ， 
并 没有 随 着 浏览 器 窗口 的 变化 而 变化 。 
© 一 口 x 内 电 四 口 x 
口 设 症 x 
C 合 127.0.0...， 女 | : 
2 应 用 门 


170430101 


居士 


| 设置 表格 百分比 尺寸 x 


C OO | ©127.0.0.1:8020/chapter3/ch.. 公 | : 
:下 应 用 站 


3-5 ”设置 表格 百分比 尺寸 的 页 面 效果 


3.3.2 ”表格 边框 设置 


前 面 已 经 提 到 表格 的 边框 宽度 使 用 属性 border 设置 ， 单 位 像素 。 默 认 值 为 0， 也 就 是 不 
显示 表格 边框 。 边 框 凑 色 使 用 属性 bordercolor 设置 ， 此 属性 和 border 属性 一 起 使 用 。 
【实例 3.6】 设 置 表格 边框 ， 文 件 名 称 为 chapter3.6.html， 内 容 如 下 : 


<1DOCTYPE html»> 
<html> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 设 置 表 格 边框 </tit1le> 
</head> 
<body> 
<table> 
<tr> 
<th> 学 守 </th> 
<th> 姓 名 </th> 
学 和 人 
<Lr> 
<td>1710430101</td> 
<td> 陆 妍 霖 </td> 
</tr> 
< 七 工 > 
< 七 d>170430102< /七 > 
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<td> 冒 玉 匡 </td> 
过 七 工交 
</table> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter3.6.html， 页 面 效 有 四 
果 如 图 3-6 所 示 , 从 页 面 效 果 可 以 看 出 表格 边框 没有 显 | 而 冲 有 
示 。 当 我 们 不 设置 表格 的 边框 属性 时 ， 边 框 border 属 C 人 OO127001. 廊 
值 采 用 默认 值 0。 :8 D 
学 号 ”姓名 
、 i 170430101 陆 妍 霖 
333 表情 对 让 态 蕊 170430102 上 冒 玉蓉 


表格 的 对 齐 方式 使 用 属性 align 设置 ， 属 性 值 有 
left、center、right 三 种 ， 分 别 代表 表格 相对 于 浏览 
窗口 居 左 、 居 中 、 居 右 ， 默 认 值 是 left。 图 3-6 设置 表格 边框 的 页 面 效果 

【实例 3.7】 设 置 表格 对 齐 方式 ， 文 件 名 称 为 
chapter3.7.html， 内 容 如 下 : 


< TDOCTYPE html» 
<html» 
<head> 
<meta charset="UTF-8"»> 
<title> 表 格 对 齐 方 式 </title> 
</head> 
<body> 
<table border="]1"> 
<tr» 
<th> 学 写 </th> 
<th> 姓 名 </th> 
<Atrs 
<tr> 
<td>1710430101</td> 
<td> 陆 妍 条 < /td> 
</try 
</table> 
<table border="1" align="center"> 
«tT» 
<th> 学 写 </th> 
<th> 姓 名 < /th> 
</tr> 
<TLr> 
<td>1710430102</td> 
<td> 冒 玉 若 </td> 
</tr> 
</table> 
<table border="1" align="right"> 
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<tr> 

<th> 学 写 < /th> 
<th> 姓 名 </th> 

</tr> 

<tr> 
<td>1710430103</td> 
<td> 彭 诗 琢 </td> 

</tr> 

</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.7.html， 页 面 效 果 如 图 3-7 所 示 ， 三 张 表格 相对 于 浏 
览 句 窗口 居 左 、 居 中 、 居 右 。 
© 坊 乌 | 
站 表格 对 齐 方 式 x | 
已 OO © 127.0.0.1:8020/chapter3/chapter3.7.html 让 : | 
::: 应 用 站 | 


| 学 号 | 姓名 | 


1170430101 | 陆 妍 考 


3-7 ”设置 表格 对 齐 方式 的 页 面 效 果 


3.3.4 单元 格 旧 中 和 边 距 


表格 的 单元 格 间距 使 用 属性 cellspacing 设置 ， 此 属性 用 来 设置 表格 中 相 邻 两 个 单元 格 之 
间 的 间距 ， 属 性 值 以 像素 为 单位 ， 默 认 值 是 2 像素 。 表 格 的 单元 格 边 距 使 用 属性 cellpadding 
设置 ， 此 属性 用 来 设置 表格 中 单元 格 边框 与 单元 格 中 的 内 容 之 间 的 距离 ， 属 性 值 以 像素 为 
单位 ， 默 认 值 是 1 像素 。 

【实例 3.8】 设 置 表格 


<lDOCTYPE html> 
<html> 
<head> 
<meta Charset—"UTF- 8"»> 
<title> 单 元 格 间 距 和 边 距 </title> 
</head> 
<body> 
<table border="1" cellspacing="5" cellpadding="10"> 
<tr> 
<th> 学 写 </th> 


的 单元 格 间 距 和 边 距 ， 文 件 名 称 为 chapter3.8.html， 内 容 如 下 : 
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<th> 姓 名 </th> 

“tr> 

<tr> 
<tLd>170430101< /tdG> 
<td> 陆 妍 条 < /td> 

</tr> 

</table> 
</body> 


a 170430101 


在 浏览 厚 中 打开 网 页 文件 chapter3.8.html， 页 面 
效果 如 图 3-8 所 示 ， 单 元 格 则 距 是 5 像素 ， 单 元 格 边 3-8 设置 表格 单元 格 间距 


框 与 内 容 之 间 的 间距 是 10 像素 。 和 边 距 的 页 面 效 果 


“3.4 表格 背景 


3.4.1 背景 颜色 


表格 背景 颜色 采用 bgcolor 属性 进行 设置 
【实例 3.9】 设 置 表 格 背景 颜色 ， 文 件 名 称 为 chapter3.9html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 表格 背景 颜色 </title> 
</head> 
<body> 
<table border="3" cellpadding="10" cellspacing="5" 
bordercolor="blue" bgcolor="pink"> 
改革 正六 
<th> 学 写 </th> 
<th> 姓 名 </th> 
x/ tr | SO -DO 
<tr> mn 
<td>170430101</td> | 人 127.0.0.1:.， 去 
<td> 陆 妍 霖 </td> | 深 应 用 站 
之 二 三 


</body> 
170430101 


</html> 

在 浏览 右 中 打开 网 页 文件 chapter3.9.html， 页 面 效 
果 如 图 3-9 所 示 , 从 浏 顺 占 的 显示 效果 可 以 看 出 表格 的 _- 
边框 宽度 为 3 像素 ， 表 格 边 杠 用 监 色 显示 ， 表 格 育 景 。” 图 3-9 设置 表格 背景 颜色 的 页 面 效 果 


于 第 3 章 表格 


用 粉红 色 显 示 。 


3.4.2 背景 图 片 


表格 育 景 图 片 采用 background 属性 进行 设置 ， 属 性 值 需要 指定 育 景 图 片 的 URL 地址 。 
【实例 3.10】 设 首 表 格 育 景 角 请， 文件 名 称 为 chapter3.10.html， 内 容 如 下 : 


<IDOCTYPE html»> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 设 置 表格 背景 图 片 </title> 
</head> 
<body> 
<table border="3" bgcolor="pink™” background="img/bgimg.]Jpg" 
width="300™ height="200"> 
<tr> 
<th> 学 号 </th> 
<th> 姓 名 </th> 
<iitr> 
<TLr> 
<td>17043010]</td> 
<td> 陆 妍 霖 < /td> 
< ttr> 
</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.10.html, 页 面 效 果 如 图 3-10 所 示 , 表格 宽 300 像素 ， 
局 200 像 系 。 当 同时 设置 峭 景 闫 色 和 背景 图 片 时 ， 背 景 图 片 优先 级 更 高 ， 有 所 以 背景 闫 色 没 
有 显示 。 


| 9 二 硬 
口 设置 表格 背景 图 片 。 。 x 
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3-10 ”设置 表格 背景 图 片 的 页 面 效 果 
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用 来 设置 表格 的 table 标记 的 常用 属性 如 表 3-1 所 示 。 
表 3-1 table 标记 的 常用 属性 


属性 | 值 描 
alien 


backeround 该 属性 设置 表格 的 背景 图 片 
bgcolor 该 属性 设置 表格 的 背景 颜色 
border 整数 值 (pixels) 该 属性 设置 表格 边框 的 宽度 


bordercolor color t 


Wr [Xf 
弄 | 型 


AS 
el 


NX 
型 


该 属性 设置 表格 对 齐 方式 ， 默 认 值 为 left 


竹 设 置 表格 边框 的 颜色 ， 此 属性 与 border 属性 一 起 使 用 


width 整数 值 (pixels)、 百分比 | 该 属性 设置 表格 的 宽度 
height 整数 值 (pixels) 该 属性 设置 表格 的 高 度 
该 属性 设置 单元 格 内 容 与 边框 之 间 的 间距 


cellpaddine 整数 值 (pixels) 让 
cellspacine 整数 值 (pixels) | 


遇 性 设置 单元 格 之 间 的 间距 


NX 
eal 


“YY 3.5 单元 格 设置 


3.5.1 单元 格 高 度 和 宽度 


单元 格 高 度 与 宽度 属性 设置 同 表格 高 度 与 宽度 属性 ， 使 用 width 和 height 属性 设置 ， 
width 属性 值 可 以 是 具体 像素 值 或 占 表格 冤 度 百分比 ，height 属性 值 是 具体 像素 值 。 如 果 一 
行 的 不 同 列 设置 的 高 度 值 不 同 ， 按 照 最 高 的 像素 值 显 示 ; 如 果 一 列 不 同行 设置 的 宽度 值 不 


同 ， 控 照 最 宽 的 像 系 值 显示 。 


【实例 3.11】 设置 单元 格 高 度 和 宽度 ， 文 件 名 称 为 chapter3.11.html， 内 容 如 下 : 


<TIDOCTYPE html» 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 单元 格 高 度 与 宽度 </title> 
</head> 
<body> 
<table border="3"> 
<tr> 
<th width="60$%" height="80"> 学 号 </th> 
<th>3> 姓 名 </th> 
“jir> 
Ee 
<tqd helght="50">170430101</td> 
<td> 陆 妍 琳 </td> 


福光 在 王 汉 
</table> 
</bhody> 
</html> 


四 设 置 单元 格 高 度 与 宽度 x 
CG 全 | © 127.0.0.1:8020/chapter3/... 让 | ; 
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在 浏览 右 中 打开 网 页 文件 chapter3.11.html， 
页 面 效 果 如 图 3-11 所 示 ， 整 体 表 格 宽 度 为 300 学 号 
像素 , 表格 第 一 列 宽 度 占 整体 表格 宽度 的 60%， 
表格 第 一 列 高 度 为 80 像素 , 表格 第 二 行 高 度 为 men Ee 
50 像素 。 


3.5.2 ”单元 格 路 行路 列 | 
图 3-11 设置 单元 格 高 度 与 宽度 的 页 面 效 果 


表格 显示 有 时 需要 把 相 邻 单元 格 进行 合 
并 ， 使 用 rowspan 和 colspan 属性 进行 设置 。rowspan 用 于 设置 跨行 ， 属 性 值 是 一 个 具体 的 
数值 ， 表 示 单 元 格 占用 的 行 数 。colspan 用 于 设置 跨 列 ， 属 性 值 也 是 一 个 具体 的 数值 ， 表 示 
单元 格 占 用 的 列 数 。 
【实例 3.12】 设 置 单元 格 跨 行 ， 文 件 名 称 为 chapter3.12.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 设 置 单 元 格 跨 行 </title> 
</head> 
<body> 
<table border="3" width="300"> 
<tr> 
<th> 姓 名 </th> 
<th> 办 公 室 </th> 
六 
<tr> 
<td> 陆 莉莉 </td> 
<td rowspan="2">405</td> 
</tr> 
<Ttr> 
<td> 凌 宝 茵 </td> 
<itr> 
</table> 
</body> 
</ntml> 


在 浏览 器 中 打开 网 页 文件 chapter3.12.html， 页 面 效 果 如 图 3-12 所 示 ， 由 于 有 两 个 人 在 
办 公 室 405， 因 此 405 所 在 单元 格 跨 两 行 。 
【实例 3.13】 设 置 单元 格 路 列 ， 文 件 名 称 为 chapter3.13.html， 内 容 如 下 : 
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<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 单元 格 跨 列 </title> 
</head> 
<body> 
<table border="3" width="300"> 
<tr> 
<th> 办 公 室 </th> 
<td colspan="2">405</td> 
<i/tr> 
<TLr> 
<th> 姓 名 </th> 
<td> 陆 烙 莉 </td> 
<td> 竣 宝 莫 </td> 
<1tr» 
</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.13.html， 页 面 效 果 如 图 3-13 所 示 ， 由 于 有 两 个 人 在 
办 公 室 405， 因 此 405 所 在 单元 格 跨 两 列 。 


© we 图 we _ 6 a 口 xX 

| 设置 单元 格 跨行 。 x : 四 设置 单元 格 跨 列 x | 
] | | 

| 二 © 127.0.0.1:8020/chapte… 交 : GC 人 © 127.0.0.1:8020/chapte.， 衣 | : 

| 

| 


号 应 用 品 | 器 应 用 站 


| ] 
| | 

| 时 莉莉 

| Ne 1405 
| 凌 宝 巧 

| 

| 


| | | 
一 aa 一 一 | 本 二 一 一 一 zz 一 


图 3-12 设置 单元 格 跨行 图 3-13 ”设置 单元 格 跨 列 


用 来 设置 单元 格 的 td 标记 的 常用 属性 如 表 3-2 所 示 。 
表 3-2 td 标记 的 常用 属性 


属性 | 值 描述 
lett 
align right 该 属性 设置 单元 格 水 平 对 齐 方式 ， 默 认 值 为 left 


center 


i 该 属性 设置 单元 格 的 背景 图 片 


bgedlar 该 属性 设置 单元 格 的 背景 颜色 


width 整数 值 (pixels)、 百 分 比 | 该 属性 设置 单元 格 的 宽度 


续 表 


属性 | 值 描述 


height 整数 值 (pixels) 该 属性 设置 单元 格 的 高 度 
i 该 属性 设置 合并 单元 格 时 一 个 单元 格 跨越 的 表格 行 数 
a 整数 值 该 属性 设置 合并 单元 格 时 一 个 单元 格 跨越 的 表格 列 数 


valign 该 属性 设置 单元 格 文字 的 垂直 对 齐 方 式 ， 默 认 值 为 middle 


3.6 ”表格 行 设置 


表格 行 明 过 <tr></tr> 定 义 , 在 tr 标记 中 使 用 属性 height 可 以 设置 此 行 的 行 高 度 ,， 单位 为 


【实例 3.14】 设置 行 高 度 ， 文 件 名 称 为 chapter3.14.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html>» 
<head> 
<meta charset="UTF-8"»> 
<title> 设 置 行 高 度 </title> 
</head> 
<body> 
<table border="1"™" width—="80%$"> 
<tr height="60"> 
<th> 学 写 </th> 
<th> 姓 名 </th> 
</tr> 
<tr height="40"> 
<td>17043010]</td> 
<td> 陆 妍 霖 < /td> 
</tr> 六 设置 行 高 度 x 
<tr> G 全 | @ 127.0.0.1:8020/ch..， 克 
<td>1710430102</tdqd> :应用 站 
<td> 冒 玉 甘 </td> ] 


eis 姓名 
</table> | 


</body> | | 70430101 [2 


</html> [1170430102 ”| 秆 二 营 
在 浏览 器 中 打开 网 页 文件 chapter3.14.html， 页 | | 
面 效 果 如 图 3-14 所 示 ， 表 格 第 一 行 高 度 为 60 像素 ， 图 3-14 ”设置 行 高 度 的 页 面 效果 
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第 二 行 高 度 为 40 像素 ， 第 三 行 没有 设置 融 上 度 属 性 ， 所 以 蜗 度 是 目 适 应 的 。 


3.6.2 人行 背景 闫 色 及 背景 图 


行 背 景 闫 色 使 用 bgcolor 属性 设置 , 行 背 景 图 使 用 background 属性 设置 ， 当 茶 行 同时 设 
置 了 bgcolor 和 background 属性 时 ，background 属性 优先 级 更 高 。 当 table、tr、td 标记 中 都 


设置 了 bgcolor 属性 时 ， 优 先 级 为 td>tr>table。 


【实例 3.15】 设 置 行 背 景 凑 色 和 背景 图 片 ， 文 件 名 称 为 chapter3.15.html， 内 容 如 下 : 


<1DOCTYPE html»> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 设 置 行 背 景 颜色 和 背景 图 片 </title> 


</head> 
<body> 


<table border="1" width="80$%" bgcolor="pink"> 
<tr height="60™ bgcolor="yellow" background="img/bgimg .Jpg"> 


< 廿 hn> 学 写 < /th> 
<th> 姓 名 </th> 
</tr> 


<tr height="40™" bgcolor="yellow"> 


<td311043010]</td> 
<td> 陆 妍 畸 </td> 
<itr> 
<TLr> 
<td>l1 0430102</td> 
<td> 冒 玉 鞭 </td> 
< tr 
</table> 
</body> 
</html> 
在 浏览 亏 中 打开 网 页 文件 chapter3.15.html， 
页 面 效 果 如 图 3-15 所 示 , 整体 表格 设置 了 背景 
闫 色 pink， 第 一 行 同时 设置 了 背景 图 片 和 背景 
闫 色 yellow， 和 第 二 行 设置 了 背景 颜色 yellow。 
tr 的 优先 级 高 于 table， 背 景 图 片 的 优先 级 高 于 
背景 颜色 ， 所 以 第 一 行 和 第 二 行 疫 有 采用 pink 
背景 色 ， 第 一 行 采 用 背景 图 片 ， 第 二 行 玉 用 
yellow， 和 第 三 行 没 用 设置 背景 ， 所 以 采用 table 
中 设置 的 pink 背景 色 。 


= | 
口 设置 行 背 景 颜色 和 ; x 
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图 3-15 设置 行 背 景 颜色 和 背景 图 片 的 页 面 效 果 
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S30 TX TX 


对 齐 方式 使 用 align 属性 设置 ， 属 性 值 有 left、center、right， 默 认为 left。 当 tr、td 标记 
中 都 设置 了 align 属性 时 ， 优 先 级 为 td>tr。 
【实例 3.16】 设置 行 对 齐 方式 ， 文 件 名 称 为 chapter3.16.html， 内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 行文 字 对 齐 方 式 </title> 
</head> 
<body> 
<table border="]1™ width—="80%"> 
< 荆 > 
<th> 学 写 </th> 
<th> 姓 名 </th> 
之 并 七 于 六 
<tr align="center™"> 
<td>170430101</td> 
<td> 陆 妍 寄 </td> 
<itr> 
<tr aliqgn—"right™> 
<td>170430102</td> 
<td> 目 玉 守 </Ed> 
<jtr> 
</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter3.16.html， 
页 面 效果 如 图 3-16 所 示 , 第 一 行 由 于 是 标题 行 ， 
th 标记 默认 加 粗 居中 ， 第 二 行 设置 居中 ， 第 三 一 一 
行 设置 居 右 显示 ， 第 三 行 的 第 二 列 单元 格 设置 
居 左 显示 ， 由 于 td 优先 级 高 于 t， 因 此 此 单元 


OO 一 Oo 
癌 设置 行文 字 对 齐 方 3 x 


GC 人 合 ©@ 127.0.0.1:8020/chap... 广 


格 内 容 居 左 ， 而 未 采用 tt 中 设置 的 居 右 :。 一 一 一 | 
LE LE 一 一 * Le | | 冬 3-16 14 于 字 订 3 , Dh 0 交 
表 3-3 所 示 ， 
表 3-3 tr 标记 的 常用 属性 
_ 描 述 
align 


该 属性 设置 表格 行 水 平 对 齐 方式 ， 默 认 值 为 left 


续 表 
属 性 描述 
backeround 该 属性 设置 表格 行 的 背景 图 片 
bgcolor 该 属性 设置 表格 行 的 背景 颜色 


height 该 属性 设置 表格 行 的 高 度 
valign 该 属性 设置 行文 字 的 屡 直 对 齐 方 式 ， 默 认 值 为 middle 


可 到 工作 场景 


wa 


通过 3.2~3.6 节 内 容 的 学 习 ， 已 经 学 习 了 table( 表 格 ) 标 记 及 属性 的 使 用 ， 掌 握 了 通过 使 
用 各 种 属性 来 控制 表格 的 显示 。 下 面 回 到 前 面 介 绍 的 工作 场景 中 ， 完 成 工作 任务 。 

【工作 过 程 】 制 作 网 站 首页 ， 使 用 表格 进行 网 页 布局 一 一 《我 的 家 乡 》。 有 其 体 布 局 如 
下 : 整体 表格 四 行 三 列 ， 第 一 行 单 元 格 路 三 列 ， 第 二 行 第 一 个 单元 格 足 两 列 ， 第 四 行 单 元 
格 踊 三 列 。 第 二 行 第 一 列 的 五 个 订单 是 一 个 藤 套 的 子 表 ， 子 表 一 行 五 列 。 网 页 内 容 目 定 ， 
工作 过 程 的 页 面 布局 效果 如 图 3-17 所 未 。 


| SB 一 DO 
| /了 D 表格 嵌 套 及 布 同 x 
CG 全 © 127.0.0.1:8020/chapter3/chapter3.18.html i 
;i 应 用 人 
和 
中 则 
i 


图 3-17 《我 的 家 乡 》 网 页 的 页 面 布局 效果 
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创建 网 页 ， 文 件 名 为 chapter3.17.html， 内 容 如 下 : 


<1IDOCTYPE html> 


<html> 
<head> 
<mela Charset— "VIF — 8"> 
<tit1le> 表 格 坐 套 及 布局 </tit1le> 
</head> 
<body> 
<table align="center™ width="800™ height="500"™ border="1"> 
<tr height="100™> 
<td colspan="3" align="center"> 网 站 名 称 及 LOGO</td> 
人 <tt> 
福 七 工 > 
<tqd colspan="2"™ width="70%" height="25"> 
<table width="550"> 
<tr align="center™"> 
<td> 菜 单 1</td> 
<td> 生 单 2/tqd> 
<td> 菜 单 3</td> 
<td> 汪 单 4< /td> 
<td> 菜 单 5</td> 
之 天 六 
</table> 
</td> 
< Tign="rignt"> 提 过 框 <7tads 
<itr> 
<tr height="300"> 
<td width="30%"> 左 边 </td> 
<td width="50%"> 中 间 </td> 
<td> 右 边 </td> 
之 并 二 天 六 
<tr height="60"> 
<td colspan="3" align="center"> 网 站 底部 信息 </td> 
</tr> 
</table> 
</body> 
</html> 


sa 3.8 工作 实 训 营 


3.8.1 训练 实例 


1. 训练 内 容 
使 用 表格 及 表格 藤 套 完成 网 页 布局 ,， 页面 布 局 效 末 如 图 3-18 所 示 。 网 页 内 容 目 行 设计 ， 
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围绕 一 个 主题 进行 ， 如 介绍 花 弄 、 星 座 、 旅 游 景点 等 。 


图 3-18 ”页 面 布局 效果 
2. 训练 目的 


> ”掌握 表格 跨行 跨 
> ”掌握 表格 嵌 套 。 
> ”掌握 表格 布局 整体 页 面 。 


|。 


3. 训练 过 程 
参照 3.7 节 中 的 操作 步 又 。 


3.8.2 工作 实践 常见 问题 解析 


【常见 问题 】 当 表格 内 容 是 瑞 文 单词 时 ， 上 默认 不 会 换行 ， 整 个 表格 宽度 会 无 限 延 伸 ， 
即使 设置 表格 或 单元 格 宽 度 也 不 起 作用 ， 如 何 解 决 换行 问题 ? 
【 答 】 给 table 设置 table-layout: fixed; table 下 的 td 设置 word-wrap: break-word:。 如 下 


所 示 。 
<Sstyle> 

table 1 
border-collapse: collapse; 
taple—-layout: fixed; 
width: 300px; 

} 

table td 1 
border: solid lpx pink; 
width: 100px; 
Word-wrap: break—word; 

} 

</style> 
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sa 3.9 本 章 小 结 


在 网 页 设计 中 ， 表 格 有 看 非常 广泛 的 应 用 ， 表 格 的 单元 格 中 不 仅 可 以 放置 文本 、 超 链 
楼 ， 还 可 以 放 秆 图片、 音频、 视频 等 ， 表 格 的 单元 格 中 还 可 以 伴 套 表格 ， 所 以 表格 非常 生 
要 的 作用 是 进行 页 面 布 局 ， 这 种 布局 可 以 是 局 部 的 ， 也 可 以 是 全 局 的 。 

表格 使 用 table 标记 ，tr 标记 表示 表格 的 一 行 ，t 标记 表示 普通 单元 格 ， 也 标记 表示 标 
题 单 元 格 ，caption 标记 表示 表格 的 标题 。 

使 用 width 和 height 属性 设置 冤 度 和 局 度 ， 使 用 bgcolor 属性 设置 育 景 凑 色 ， 使 用 
background 属性 设置 背景 图 片 。 如 果 在 table、tr、td 标记 中 设置 了 相同 的 属性 ， 优 先 级 顺序 
是 td>tr>table。 如 果 同 时 设置 了 background 和 bsgcolor，backsground 优先 级 高 于 bgcolor。 

使 用 cellpadding 属性 设置 单元 格 边 框 与 内 容 之 间 的 距离 ， 使 用 cellspacing 属性 设置 单 
元 格 与 单元 格 之 间 的 距离 。 

使 用 colspan 属性 设置 单元 格 跨 列 ， 使 用 rowspan 属性 设置 单元 格 跨行 。 


2 3.10 习 题 


设置 table、tr、td 的 属性 时 ， 考 都 设置 了 bgcolor 属性 ， 优 先 顺 厅 是 ( 站 


A. td>table>tr B. td>tr>table 
C. table=>tr>td D. table=>td=>tr 
二 、 填 衬 题 
]. 在 网 页 中 创建 表格 时 ， 使 用 标记 定义 表格 ， 
标记 定义 表格 行 ， 标记 定义 单元 格 ， 标记 定义 标题 单 
元 格 ， 标记 定义 表格 标题 。 
2. ”align 属性 取 值 是 . ， 上 默认 值 是 
3. 表格 单元 格 间距 使 用 属性 设置 ， 单 元 格 内 容 与 边框 之 间 间 距 
使 用 属性 设置 。 
4 表格 单元 格 跨行 使 用 属性 设置 ， 单 元 格 跨 列 使 用 
属性 设置 。 


三 、 操 作 题 
1]. 创建 网 页 《值班 表 》， 文 件 名 为 ex3.1.html， 页 面 效 果 如 图 3-19 所 示 。 
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中 值班 表 x | 


《> 合 © 127.0.0.1:8020/chapter3/chapter3.19.html 
:3 应 用 口 


EC 
小 李 


图 3-19 《值班 表 》 页 面 效 果 


2. 创建 网 页 《我 的 爱好 》， 文 件 名 为 ex3.2.html， 介 绍 你 的 个 人 爱好 ， 使 用 表格 及 表 
格 族 天 元 成 页 面 布局 ， 页 面 内 容 自 行 设置 。 


a 标记 


加 : 
iframe 标记 


加 ” 堂 
掌握 使 用 
图 ”掌握 a 标记 来 实现 
掌握 使 用 a 村 实现 外 部 4 
i 本 
人 
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AS 4.1 工作 场景 导入 


【工作 场景 

如 何 让 多 个 孤立 的 网 页 之 间 产 生 一 定 的 联系 ， 网 页 之 间 可 以 相互 访问 ， 并 且 网 页 之 间 
可 以 嵌 套 子 窗口 链接 。 

下 面 需要 制作 三 种 类 型 的 网 页 ， 其 中 ， 第 一 种 类 型 的 网 页 实现 链接 到 其 他 网 页 或 外 部 
文件 上 ， 第 二 种 类 型 的 网 页 实现 电子 邮件 链接 ， 第 三 种 类 型 的 网 页 实现 网 页 内 部 的 锚 点 
链接 。 

【引导 问题 】 

(D 怎样 实现 外 部 链接 ? 

(2) 怎样 实现 锚 点 链接 ? 

(3) 怎样 实现 邮件 链接 ? 

(4) 怎样 实现 浮动 框架 ? 


AS 4.2 ”起 链接 


超 链 接 是 指 从 一 个 网 页 指 回 一 个 目标 的 链接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 
以 是 相同 网 页 上 的 不 同位 置 ， 还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 
一 个 应 用 程序 ， 当 鼠标 单 击 一 些 文学 、 图 片 或 其 他 网 页 元 系 时 ， 浏 贤 强 会 根据 其 指示 载 入 
一 个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 链接 除了 可 链接 文本 外 ， 还 可 以 链接 各 种 多 媒 
体 ， 如 声 首 、 图 像 、 动 和 画 等 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链接 所 使 用 的 HTML 标记 为 <a></a>。 超 链接 最 重要 的 两 个 要 素 为 : 超 链接 指向 
的 目标 地 址 和 设置 为 超 链接 的 网 页 元 际 。 基 本 的 超 链 接 结构 如 下 : 

<a href=URL> 网 页 元 素 </a> 

表 4-1 所 示 为 a 标记 的 党 用 属性 。 

表 4-1 a 标记 的 常用 属性 


六 
i 规定 被 链接 文档 的 字符 集 。HTML5 中 不 支持 该 属性 
coords 规定 链接 的 坐标 。HTML5 中 不 支持 该 属性 
download 规定 被 下 载 的 超 链接 目标 
href 规定 链接 指向 的 页 面 的 URL 


media media quel 规定 被 链接 的 文档 为 何 种 媒介 /设备 优化 的 


name 规定 锚 的 名 称 。HTMLS 中 不 支持 该 属性 


属性 | 《“ 值 | 描述 
rel 规定 当前 文档 与 被 链接 文档 之 间 的 关系 
ee 规定 链接 的 形状 。HTML5 中 不 支持 该 属性 
si 规定 被 链接 文档 的 MIME 类 型 


值 
ol 
nF 4 


4.2.1 外 部 链接 


超 链接 中 外 部 链接 的 语法 格式 如 下 : 
<a href=" 外 部 页 面 链接 地 址 "> 链接 文本 </a> 


外 部 链接 的 文件 可 以 是 某 个 外 部 网 址 、 某 个 文件 、 菏 个 图 片 、 茶 个 应 用 程序。 
【实例 4.1】 外 部 链接 a 到 其 他 网 站 和 FTP 服务 器 上 ， 文 件 名 称 为 chapter4.1.html， 内 容 


如 下 : 
<1IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<tit1le> 外 部 链接 到 其 他 网 站 和 FTP 服务 器 上 </title> 
</head> 
<body> 
<p><a href="http://www.baidu.com/"> 点 我 ， 链 接 到 百度 上 </a></p> 
p> iref="rFtp:Y7L72.18.32.16"3 点 我 链接 到 FTP 服务 器 上 <7a3<7BS 
<br/> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter4.1.html， 页 面 效 果 如 图 4-1 所 示 ， 单 击 链接 文本 ， 可 
以 链接 到 百度 网 站 和 FTP 服务 器 上 ( 见 图 4-2、 图 4-3)。 


说 明 : 
(1) 这 些 FTP 服务 器 使 用 的 是 IP 地 址 ， 为 了 确保 代码 的 正确 性 ， 请 读者 务必 填写 有 效 
的 FTP 服务 器 地 址 。 


(2) target 属性 有 4 个 : blank、 self、 top、 parent。 由 于 HIMLS 不 再 支持 杠 ， 因 此 
_top、_parent 这 两 个 取 值 不 党 用 。_blank 表示 在 新 窗口 中 显示 超 链接 页 面 ; _self 表示 在 当 
前 窗口 中 显示 超 链接 页 面 。 当 省 略 target 属性 时 ， 默 认 取 值 为 self。 
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i DD chapter3.1.html x WW 


G | 127.0.0.1:8020/ch3/chapterd.1.html 


到 4-1 在 浏览 器 中 链接 到 外 部 网 站 和 FTP 服务 器 的 页 面 效果 


口 chaptsr3.1html X 党 百度 一 下 ， 你 就 知道 
| | @ Secure | https://www.baidu.com 宜 | S 


南京 ; :2 33"C 良 64 | 撞 肢 。 消息 新 闻 ”hao123 地 图 视频 ”贴吧 字 术 emilyif 


Bait 全 百度 


信息 根据 您 的 兴趣 推荐 讲 时 热点 
Fb RE 


在 中 国 市 场 ， 外 企 为 什么 越 来 越 不 行 了 ? 女性 最 不 安全 国家 黄秋生 承认 和 
| 冯小刚 机 场 1 ” 


图 4-2 在 浏览 器 中 链接 到 百度 网 站 上 
【实例 4.2】 外 部 链接 到 外 部 文件 上 ， 文 件 名 称 为 chapter4.2.html， 内 容 如 下 : 


<1DOCTYPE html> 
<htm]> 
<head> 
<meta charset="UTF-8"> 
<t1itle> chapterd.2 htmnl </titley 
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</head> 
<body> 
<a href="chapter4.1 html"> 点 我 ， 链 接 到 chapter4.1.html 这 个 文件 上 </a> 


<br/> 


</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter4.2.html， 页 面 效 果 如 图 4-4 所 示 ， 单 击 链接 文本 ， 可 
以 链接 到 刚才 编写 的 chapter4.1 .html 文件 上 。 


Index ofy 


GG | 加 Not secure | ftp://172.18.32.16 


Index of / 


3 
L_ 
y 
上 EJ 
a | 
Ll 
[| 
医 ) 
多 
BG 
L_ 


j 固 轩 四 辐 固 固 因 固 固 1 


Name 
1z0-031 SOL Fundamentals rar 
2003 server 序列 号 txt 
apply _ template 1.xls 
apply _ template 2.xls 
cn sql server 2008 r2 standard x86 x64 1a64 dvd >22239 .1s0 
cen windows 10 enterprise x86 dvd 6846962.150 
Excel 操 作 练 习 rar 
javaweb 工 具 / 
loadrunmer-11lrar 
LoadRunner 破 解 过 程 new.doc 
LoadRunner 破 解 文件 zip 
M21F71D10 大 学 计算 机 基础 课程 资料 包 rar 
npp.6.8.3.bin zip 
oracle day09 1008 exam.txt 
student setup.exe 


SW DVDS Visual Studio Pro 2008 ChnSimp Core MLF X14-26491.ISO 


vnware workstation 10 SN .txt 
gu |-1000-12959080 exe 


i aAle=WW OTstAaAlloil=11 
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} i Le 
口外 部 链接 到 外 部 文件 x \ \ 


3.8 MB 
3.2 kB 
48.2 MB 
3.7GB 
68B 
490 MB 


Date Modified 
号 /416 8-00:00 上 ML 
$5/11/16, 8:00:00 AM 
4/17/17., 8:00:00 AM 
4717717 8:00-00 AM 
11/16/15, 8:00:00 AM 
11/13/16, 8:00:00 AM 
11/20/15., 8:00:00 AM 
$3218, 5:43:00 PM 
530/16, 8:00:00 AM 
3/130/16. 8:00:00 AM 
535130016.8:00:00 AM 
929/15, 8:00:00 AM 
10/19/15, 8:00:00 AM 
10/8/16, 8:00:00 AM 
/3716. 8-00:-00 AM 
11/16/15, 8:00:00 AM 
$5/11/16, 8:00:00 AM 
1116. 8:00:00 AB 


G&G ] 加 127.0.0.1:8020/ch4/chapterd.2.html 


点 我 ， 链 接 到 chapter4 2 这 人 小 交 件 上 


4-4 ”链接 到 外 部 文件 的 页 面 效 果 
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【实例 4.3】 设 置 图 片 的 超 链接 ， 文 件 名 称 为 chapter4.3.html， 内 容 如 下 : 


<1IDOCTYPE html>»> 


<html> 
<head> 
<meta charset=—"UTF-—8"> 
<title> chapberd4.3.hitml </title> 
</head> 
<body> 
<a href="chapter4.1.html" target=" blank"> 
<Img Sre—"+mg/eg mouse.Jpg"> 
</a> 
</bhody> 
</htm]l> 


在 超 链接 中 ， 除 了 文本 可 以 实现 超 链接 ， 图 片 、 其 他 应 用 程序 都 可 以 实现 链接 功能 。 
chapter4.1.html 文件 上 。 


) 口 chapter43.html x WN 


GC | 127.0.0.1:8020/chd /chapterd.3.html 


CP 


127.0,0.1:8020/ehdrchapter4.3.html 


图 4-5 ”实现 图 片 超 链接 的 页 面 效 果 
【实例 4.4】 设 置 超 链接 ， 可 链接 到 各 种 类 型 的 文件 ， 文 件 名 称 为 chapter4.4.html， 内 


容 如 下 : 
<IDOCTYPE html»> 
<html» 
<head> 
<meta charset="UTF—8"™"» 
<title> chapter4.4.html </title> 
</head> 
<body> 
和 
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<p><a href="img/map.jp9g"> 点 我 链接 到 图 片上 </a></p> 
<p><a href="media/SHE- 不 想 长 大 .wav"> 点 我 链接 到 声音 上 </a></p> 
<p><a href="media/LX92 .AVI"> 点 我 链接 到 视频 上 </a></p> 
<p><a href="test.docx"> 点 我 链接 到 word 文件 上 </a></p> 
</body> 

</html> 


在 超 链接 中 ， 除 了 文本 可 以 实现 超 链接 ， 图 片 、 音 频 、 视 频 、 其 他 应 用 程序 都 可 以 实 
现 链接 功能 。 如 果 是 浏览 器 不 能 识别 的 类 型 ， 一 般 浏览 器 会 弹出 文件 下 载 对 话 框 ， 进 行 
提示 。 

超 链 接 <a> 中 的 href 属性 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 文本 、 图 片 、 
音频 、 视 频 等 )。 如 果 是 浏览 器 能 够 识别 的 类 型 ， 会 直接 在 浏览 器 中 显示 ， 如 果 是 浏览 器 不 
能 识别 的 类 型 ， 在 浏览 器 ， 比 如 下 浏览 器 中 就 会 弹出 文件 下 载 对 话 杠 。 

在 浏览 器 中 打开 网 页 文件 chapter4.4html， 页 面 效果 如 图 4-6 所 示 ， 超 链接 分 别 链接 到 
图 片 、 声 音 、 视 频 和 其 他 应 用 程序 。 


% fl re . 和 一 
JB 127.0.0.1:8020/chdfind 又 多 四 127.0.0.1:8020/chdii.1 又 克 口 127.0.0.1:8020/chaicha x ON\ 


@ | 四 127.0.0.1:8020/ch4rchapter4,.4.html| 售 


点 我 链接 到 图 片上 
| 

所 我 链接 到 声音 上 
| 占 兹 具 字 盏 | 和 上 i 


] yn 
/ 点 我 链接 到 wordw 忻 上 


4-6 ”链接 到 各 种 类 型 文件 的 页 面 效 果 


4.2.2 电子 邮件 链接 


在 某 些 网 页 中 ， 当 访问 者 单 击 某 个 链接 以 后 ， 会 日 动 打 开 电 子 邮 件 客户 端 软件 (如 
Outlook 或 Foxmail 等 ) 回 菜 个 特定 的 E-mail 地 址 发 送 邮 件 , 这 个 链接 就 是 电子 邮件 链接 。 电 
子 邮 件 链 接 的 格式 如 下 : 

<a href="mailto: 电子 邮件 地 址 "> 链接 文本 </a> 


【实例 4.5】 电 子 邮件 链接 ， 文 件 名 称 为 chapter4.5.html， 内 容 如 下 : 
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<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 电 子 邮 件 链接 </title> 
</head> 
<body> 
<p> 南 京 信息 职业 技术 学 院 </p> 
<p> 通 信 地 址 :， 南 汞 仙 林 大 学 城 文 澜 路 99 号 /p> 
<p> 邮 编 : 210023</p> 
<p> 主 页 地 址 : http://www.njcit.cn</p> 
<p><a href="mailto:zhangwen@njcit.cn"> 联 系 我 们 </a></p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter4.5.html， 页 面 效果 如 图 4-7 所 未 ， 单 击 “ 联 系 我 们 ”， 
会 目 动弹 出 电子 邮件 客户 请 窗口 以 编写 电子 邮件 。 


] 口 12700.18ozo/charch x WN\ 
C © 127.0.0.1:8020/ch4 /chapter4.5.html 
南京 信息 职业 技术 学 院 
通信 地 址 ， 南京 山林 大 对 城 文 钴 路 99 呈 ,p> 
邮编 ，210023 
主页 地 址 ，http://wwwnicit.cn 
联系 我 们 
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4.2.3” 销 扣 链接 


如 果 网 页 内 容 较 多 ， 页 面 过 长 ， 浏 览 网 页 时 就 需要 不 断 地 拖 动 滚动 条 ， 来 查看 所 需要 
的 内 容 ， 这 样 效 率 较 低 且 不 方便 。 为 了 加 快 信息 检索 的 速度 ，HIML 提供 了 一 种 特殊 的 链 
接 一 一 销 点 链接 ， 通 过 创建 锁 点 链接 ， 能 够 较 快 定位 到 目标 内 容 。 

锚 点 链接 的 格式 如 下 : 

<a href="#id 名 "> 链接 文本 </a> 
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【实例 4.6】 锁 点 链接 ， 文 件 名 称 为 chapter4.6.html， 内 容 如 下 : 


<ldoctype htm]l> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>chapter4.5 html</title> 

</head> 

<body> 

课程 介绍 : 
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<1i><a href="#two"> 网 页 设计 与 制作 </a></1i> 

<1i><a href="#three">Flash 互动 广告 动画 设计 </a></1i> 

<1i><a href="#four"> 用 户 界 面 (UI) 设 计 </a></1i> 

<]i><a href="#five">JavaScript 与 JQuery 网 页 特效 </a></1i> 

</nl> 

<h3 id="one"> 平 面 广 告 设计 </h3> 

<p> 课 程 涵盖 Photoshop 图 像 处 理 、I11ustrator 图 形 设计 、 平 面 广告 创意 设计 、 字 体 设 
计 与 标志 设计 。</p3 

<br /><br fo<br fT><br DEC fo<br cr eprF /><bhr /><br 
><br /><br /> 

<h3 id="two"> 网 页 设计 与 制作 </h3> 

<Pp> 课 程 涵闸 DIV+CSS 实现 Web 标准 布局 、Dreamweaver 快速 网 站 建设 、 网 页 版 式 构图 与 
设计 技巧 、 网 页 配色 理论 与 技巧 。</p> 

<Dr /><Dr #1><br /><br /><br ><DF ff><br 71><bDr /><br /><br /><br /><br 
><br /><br > 

<h3 id="three">Flash 互动 广告 动画 设计 </h3> 

<p> 课 程 涵盖 Flash 动画 基础 、Flash 高 级 动画 、Flash 互动 广告 设计 、Flash 商业 网 站 设 
3 

<bBr jy><br /><br ><br fo<br ET /><br AD /SADY JoabBr ecoF f/fS><Dr 
><br /><br /> 

<h3 id="four"> 用 户 界 面 (VI) 设计 </h3> 

<p> 读 程 涵盖 实用 美术 基础 、 手 绘 基础 造型 、 图 标 设 计 与 实战 演练 、 界 面 设计 与 实战 演练 。</P> 

<br /><br 7><br /3S<br /><br /><bhr ED fo<br /<hr /><br /><br /hr 
><bDr ff><br /> 

<h3 id="five">JavaSscript 与 JQuery 网 页 特效 </h3> 

<p> 课 程 遂 辣 JavaScript 编程 基础 .JavaScript 网 页 特效 制作 、JQuery 编程 基础 ,JQuery 
网 页 特效 制作 。< /p> 


</body> 

</html> 
在 浏览 器 中 打开 网 页 文件 chapter4.6.html， 页 面 效果 如 图 4-8 所 示 。 
创建 锚 点 链接 分 为 两 步 : 


(1) 使 用 <a hre 伍 "#d 名 "> 链接 文本 </a> 创建 链接 文本 。 
(2) 使 用 相应 的 id 名 标注 跳 转 目标 的 位 置 。 
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Eel x 
口 ” 锚 点 链接 x + 
< GG 加 文件 | flleVWE:/ 教 学 /网 页 设计 技术 /2018 在 线 平台 建设 资源 /ch4%20%20 超 .， 玄 ” 心 
课程 介绍 


e Javascript 与 JQuery 网 页 特效 
平面 广告 设计 


课程 通 盖 Photoshop 国 像 处 理 、 串 ustrator 图 形 设计 、 平 面 广告 创意 设计 、 字 体 设计 与 标志 设计 。 


4-8 ”创建 锚 点 链接 的 页 面 效果 


“4.3 浮动 框架 iframe 


HIMLS 中 己 经 不 文 持 frameset 框架 , 但 是 它 仍然 文 持 这 ame 浮动 框架 的 使 用 。 浮动 框 
架 可 以 目 由 控制 窗口 大 小 ， 可 以 配合 表格 随便 地 在 网 页 中 的 任何 位 置 插 入 窗口 。 实 际 上 就 
是 在 窗口 中 再 创建 一 个 窗口 。 

使 用 1frame 创建 浮动 框架 的 语法 格式 如 下 : 

<iframe src=" 链 接 对 象 "></iframe> 

其 中 src 表示 浮动 框 染 中 显示 对 象 的 足 人 笃 ， 可 以 是 绝对 路 人 径 ， 也 可 以 是 相对 路 和 任 。 

【实例 4.7】 用 浮动 框架 显示 白 上 度 网 站 ， 文 件 名 称 为 chapter4.7.html， 内 容 如 下 : 


<1IDOCTYPE html» 


<html> 
<head> 
<meta charset="UTF-—8"> 
<title>chapter4.7.html</title> 
</head> 
<body> 
<iframe src="http://www.baidu.com/"></1iframe> 
</body> 
</html> 
在 浏 贤 器 中 打开 网 页 文件 chapter4.7.html， 页 和 面 效 果 如 图 4-9 所 示 ， 单 击 链 接 文 本 ， 可 
以 链接 到 百度 网 站 。 


于 第 4 章 ” 超 链接 


iframe 百度 搜索 X 1 二 HTML <iframe>= 标签 | 其 y 六 chapterd4.Zhtml x We 


4-9 ”设置 iframe 浮动 框架 的 页 面 效 果 


从 预览 结果 可 见 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 ， 默 认 情 况 下 浮动 框架 的 宽度 
和 高 度 为 220pxx120px。 如 果 需 要 调整 浮动 框架 尺寸 ， 请 使 用 CSS 样式 。 修 改 上 述 浮动 框 
架 尺寸 ， 需 在 <head> 标 记 部 分 增加 如 下 CSS 代码 。 页 面 效果 如 图 4-10 所 示 。 


<Sstyle> 
1frame1 
width:1000px; 
height:600px; 
border:none,; 
} 
</atyle> 


1 F 本 和 
| ~ chapterd.7.html X 【人 -。 chapter4.7.html x ) chapter 4.7 html * 
x |@ 12700.18020/chdichaptera.7.htmi 位 


南京 : 汪 33C 向 60 | 执 歧 消息 是 闻 ”haot23 地 图 视频 ”贴吧 学 术 semih 必 


Bai 人 i 百度 


我 的 关注 二 导航 


误 时 热点 
印度 小 飞机 坚 毁 致 5 人 死亡 女性 最 不 安全 国家 ”黄秋生 承 记 
yt EY PE a sy ,mn 


图 4-10 ”修改 高 度 和 宽度 的 浮动 框架 效果 
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说 明 : 在 HTML4.0 中 1framset 文 持 很 多 其 他 的 属性 ， 比 如 align、frameborder、height、 
scrollnge， 但 是 在 HIMLS 中 ，iframe 仅 文 持 src 属性 ， 不 支持 其 他 属性 。 


Sa 4.4 回 到 工作 场景 


通过 4.2~4.3 节 内 容 的 学 习 ， 已 经 学 习 了 a 标记、iframe 标记 的 使 用 ， 掌 握 了 使 用 a 标 
记 来 实现 各 种 链接 、 使 用 iframe 标记 来 实现 网 页 的 插入 。 下面 回 到 前 和 面 介 绍 的 工作 场景 中 ， 
完成 工作 任务 。 
【工作 过 程 一 】 通 过 超 链 接 ， 来 实现 不 同 网 页 之 间 的 跳 转 。 
创建 网 页 ， 文 件 名 为 chapter4.8.html， 内 容 如 下 : 


<1IDOCTITYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>chapter4.8.html</title> 
</head> 
<body bgcolor="#000000"> 
<CenLer> 
<Tont color="#FFFEEFE™ Size—"5" face-" 人 华文 仿宋 "> Flash Mx</font><bri> 
<hr/> 
<a href="chapter4.8.1.html"><img src="img/406.Jpg" /></a>tgnbsp; 
<a href=" chapter4.8.2.htm]l"><img src="img/407.Jpg™" /></a>&tnbsp; 
<a href=" chapter4.8.4.html"><img src="img/405.Jpg" /></a><br/> 
<1img src="img/408.GIF™ /> 
</center> 
</body> 
</html> 


页 面 效 果 如 图 4-11 所 示 。 


DB chapter4.8,html 并 


Ca | 127.0.0.1:8020/cha4/chapterd,g.himl 
Flash Mx 


而 客 简介 家 村 贡 胃 实例 度 莹 


夏 


图 4-11 起 链接 首页 页 面 效 果 


面 第 4 章 ” 超 链接 


其 中 “内 容 简 介 ”“ 素 材 说 明 ”“ 实 例 欣 贡 ” 是 图 片 链 接 ， 分 别 链接 到 不 同 的 页 面 上 。 
单 击 “内 容 简介 ”， 进 入 到 chapter4.8.1.html 文件 ， 代 码 如 下 : 


<IDOCTYPE htm > 
<html> 

<head> 

<meta charset="UTF-8"> 
<title>chapter4.8.1.html</title> 

</head> 
<body> 

<Center> 

<h2> 音 乐 的 表现 力 </h2> 

</center> 

<pre> 

<font size="5"> 

汉语 、 英 语 和 德语 都 是 语言 ， 音 乐 也 是 一 种 语言 。 虽 然 这 两 类 语言 的 构成 和 表现 力 不 同 ， 但 都 
是 人 的 心声 。 作 为 音 啊 诗人， 莫扎特 是 了 解 自 己 的 ， 他 是 一 位 善于 扬长 避 短 、 攀 上 音乐 艺术 高 峰 的 旷 
世 奇 才 。 他 自己 也 说 过 : 

<1mg src="img/402.GIF™" align="left"> 

<font face=" 黑 体 " Se 

“我 不 会 写 诗 ， 我 不 是 诗人 也 不 是 画家 。 我 不 能 用 手势 来 表达 自己 的 感情 : 我 不 是 舞蹈 家 。 但 
我 可 以 用 声音 来 表达 这 些 : 因为 ， ER 

</pre> 
</body> 
</html> 


实现 效果 如 图 4-12 所 示 。 


1 0 chapter4.8.1.htmnl x & 


| 


G |@ 127.0.0.1:8020/ch4/t pp 


音乐 的 表现 力 


汉语 、 黄 诸 和 德语 都 是 诸 言 ， 痢 乐 也 是 - 种 语言 。 虽 然 这 两 
类 请 言 旬 构 成 和 家 殉 力 不 同 ， 但 都 是 人 的 心声 。 作 为 音 啊 诗人 ， 
训 扎 特 是 了 解 目 己 的 ， 他 是 一 位 善于 扬长 避 短 、 攀 上 音乐 生 术 局 
峰 的 及 时 生 才 。 他 自己 也 说 过 ; 


“我 不 会 写 证 ， 我 不 是 诗人 也 
不 是 男 家 。 我 不 能 用 手势 来 表达 自 
己 的 感情 : 我 不 是 舞蹈 家 。 但 我 
可 以 用 声音 来 表达 这 些 : 内 为 ， 我 


本 本 


= 
下 上 音乐 家 。 


图 4-12 ”起 链 接 子 页 面 效 果 (1) 
单 击 “ 素 材 说 明 ”， 进 入 到 chapter4.8.2.html 文件 ， 实 现 效 果 如 图 4-13 所 示 。 


G | 加 127.0.0.1:8020/ch4/chapter4.8.2.html 


欧洲 信息 技术 市 场 产 值 


图 4-13” 超 链接 子 页 面 效 果 (2) 


【工作 过 程 二 】 使 用 iframe 标记 ， 配 合 表 格 来 实现 超 链接 。 
本 实例 主要 通过 表格 和 iframe 标记 实现 一 个 个 人 静态 网 站 , 其 中 ifame 控制 主页 面 和 沫 
单 栏 ， 用 表格 实现 菜单 栏 的 对 齐 页 面 效 果 如 图 4-14 所 示 。 


: @ - oO x 
/ D chapter4&.1.html x 0 无 标 服 文 炉 x WA 
GG | 人 eyWFYO01. 履 学 情况 /01. 和 教 学识 件 /HTMLS5 和 %20APP 应 用 与 开发 /PPT/ 项 目 1/ 查 序 代码 /任务 7/tablelayouV 首页 htrmil 罕 


自我 介绍 | $0 后 的 我 们 到 底 是 什么 样 的 ， 说 实在 的 我 也 很 蕉 下 定义 ， 也 入 难说 明白 ， 也 许 许 
ee A 上 多 人 部 会 是 这 样 认为 的 吧 ， 和 曾经 很 多 人 说 我 们 80 后 的 很 报道 ， 可 是 从 90 后 的 身上 
我 才 明白 什么 才 是 那 种 所 谓 的 " 报 逆 "， 说 孜 们 地 了 逆 的 和 我 们 之 加 有 很 大 的 差 寻 ， 
的 请 让 各 可 是 90 后 的 和 我 们 又 有 很 大 的 差距 ， 各 种 观念 更 是 存在 差异 
的 ， 比 如 着 苇 ， 言 行 ， 一 个 现在 对 于 % 后 的 很 流行 的 词 . 非 主流 ， 真 的 很 不 一 


清 样 ， 这 就 是 他 们 吧 -! 
“0 sky 一 个 的 后 和 90 后 共同 的 天 地 
”让 我 们 在 这 里 无 拘 无 训 的 起 谈 -~! 
30 后 经 典 青春 勋 去 剧 
喜欢 音 斗 的 几 个 原因 
《 音 斗 》 


理 斗 中 的 经 果 台 * 


图 4-14 个 人 网 站 首页 效果 
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实例 首页 代码 如 下 : 


<Idoctype html> 
<html> 
<head> 
<meta charset="ntfi— 8"> 
<title> 综 合 实例 2- 首 页 </title> 
</head> 
<body> 
<table width="128]1"™ height="56]1" border="0" cellspacing="0"> 

< 二 全 

<td height="194" colspan="2"><1mg src="1image/main img.JPpg" width=1263px 

height=194px; ></td> 

</tr> 

< 
<td width="169"™" height="400"> 
<iframe src="left.html™" width="169™ height="600" ></iframe> 
</td> 
<td width="1112"™> 
<iframe src="main.html™ width="1102"™ height="600"™ name="display" ></iframe> 
< {tas 

i Er> 

EE 

<td colspan="2™" Bgcolor—"#FFFEFEF"><font coOlor="#FFO0FF" size="™42"™> 欢 迎 

光临 本 网 站 ， 版 权 所 有 : *****</font></td> 

eA 
</table> 
</body> 
</html> 


实例 左 侧 亲 单 栏 代码 如 下 : 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 综 合 实例 2- 左 侧 菜 单 栏 </title> 

</head> 

<body bgcolor="#FFFEFCC™"»> 

<table width="148"™ height="564" align="center™ > 

<tr> 

<td height="73"><a href="introduce.html™" target="display™" > 自我 介绍 
</a></td> 

Er 

<tr> 

<td height="61"S<a href="photo.html™ target="display™ 3 小 人 与 具 <ya><Atd> 
i 

< 二 rr 

“Ed height—"54"<a href—"inpaut.html™ target—"display” > 用 户 计 册 </a></ Ed> 
EL 
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< 二 

<td heloght="6l" yxa href—"diary,html™ target—"display” 3 我 的 日 志 </ay</bds 
< tr 

<tr> 

<td height="62"3<a href="EForecast.htmal"™ target—"dliaplay™ 3 全 我 留言 </a3</td> 
</tr> 

<tr> 

<tdS><p>ca href—"EForecast .html™ target—"display” 3 友情 链接 </aS<jp>y</td> 
</tr> 

</table> 

</body> 

</html> 


本 实例 内 容 较 多 ， 其 他 部 分 的 代码 和 实现 结果 请 读者 下 载 源 代码 进行 学 习 。 


AS 4.5 工作 实 训 营 


4.5.1 训练 实例 


1. 训练 内 容 

目 行 设 计 一 个 页 面 ， 创 建 巷 父 表 格 ， 在 雪 格 中 加 入 图 像 和 超 链接 ， 网 页 围 纸 一 个 主题 
合理 布局 。 

2. 训练 目的 


掌握 外 部 链接 的 使 用 。 
掌握 销 点 链接 的 使 用 。 
掌握 浮动 框架 的 使 用 。 


3. 训练 过 程 

参照 4.3 节 中 的 操作 步骤 。 

4. 技术 要 点 

注意 网 页 上 超 链 接 的 格式 和 浮动 框 轨 属 性 的 设置 。 


Vv VY Y 


4.5.2 ”工作 实践 常见 问题 解析 


【和 节 见 问题 】 为 什么 初学 者 网 页 的 超 链 接 样 式 和 我 们 平时 看 到 网 站 的 不 一 样 ? 

【和 谷 】 目 前 ， 各 大 浏 贤 右 对 于 a 标签 部 是 文 持 的 ， 但 对 于 条 些 属性 ， 较 噩 版 本 的 浏 宽 
锻 是 不 文 持 的 。 此 外 ， 在 所 有 浏 贤 嚣 中， 链接 的 默认 外 观 是 

> 未 被 访问 的 链接 和 珊 有 下 划 线 而 且 古 到 色 的 。 

> ”已 被 访问 的 链接 市 有 下 划 线 而 且 是 条 色 的 。 
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> ”活动 链接 市 有 下 划 线 而 且 是 红色 的 。 
如 果 想 更 改 超 链 接 的 属性 ， 可 以 在 后 面 CSS 部 分 进行 修改 超 链接 的 各 种 设置 。 


< 4.6 本 章 小 结 


一 个 网 站 通过 各 种 形式 的 超 链 接 将 各 个 页 面 联 系 起 来 ， 形 成 一 个 整体 ， 这 样 浏览 看 可 
以 通过 单 击 网 页 中 的 超 链 接 找到 目 己 所 需 的 网 页 和 信息 。 

a 标记 十 HIML 标签 中 实现 超 链 接 的 重要 标 丛 。 通 过 a 标记 可 以 实现 网 页 之 间 的 链接 ， 
网 页 与 图 片 、 多 媒体 元 系 等 各 种 应 用 程序 之 间 的 链接 :同时 可 以 实现 电子 邮件 链接 、 锁 操 

通过 iframe 标记 可 以 创建 包含 男 外 一 个 文档 的 内 联 框 架 ( 即 行内 框 染 )， 可 以 在 过 ame 
标记 中 实现 图 片 、 文 件 的 能 入 ;fame 标记 也 可 以 和 表格 等 配合 使 用 , 实现 网 页 框 染 的 控制 。 


一 、 单 项 选择 是 
1. 如 果 在 catalog.htm 中 包含 如 下 代码 : <A HREF="#novel"> 小 说 </a>， 则 该 HIML 
文档 在 浏览 器 中 打开 后 ， 用 户 单 击 此 链接 将 ( ” ). 
A. 使 页 面 跳 转 到 同一 文件 夹 下 名 为 “novel.html” 的 HTML 文档 
B. 使 页 面 跳 转 到 同一 文件 夹 下 名 为 “小 说 .html” 的 HTML 文档 
C. 使 页 面 跳 转 到 catalog.htm 包含 名 为 “novel” 的 锚 记 处 
D. 使 页 面 跳 转 到 同一 文件 夹 下 名 为 “小 说 .html” 的 HTML 文档 中 名 为 “novel” 


的 锁 记 处 
2. 和 若 超 链接 的 href 属性 ,需要 链接 到 list 页 面 中 的 one 锚 点 ,以 下 书写 正确 的 是 ( )。 
A. list.html B. #one.list C. list#one D. list.html#one 
3. ”下 列 选项 中 ， 不 属于 “target” 属 性 值 的 是 ( )。 
A. double B. self C. new D. blank 


1. 创建 邮件 链接 时 ，a 元素 的 href 属性 应 以 开头 

2. 在 新 的 窗口 打开 链接 时 ，target 属性 值 为 ; 在 父 窗 口 打开 链接 时 ， 
target 属性 值 为 ; 在 原来 的 窗口 打开 链接 时 ，target 属性 值 为 

3. 在 指定 页 内 超 链 接 时 , 若 在 某 一 个 位 置 使 用 <a = “target”> 锚 点 </a> 
语句 定义 了 锚 点 ， 那 么 应 使 用 以 下 语句 ， 以 便 在 单 击 超 链接 时 跳 转 到 锚 点 定义 的 位 置 : <a 
href= > 锚 点 链接 ， 
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三 、 操 作 题 
1. 实现 网 址 链接 ， 文 件 名 为 ex4.1.html， 页 面 效 果 如 图 4-15 所 示 。 单 击 主页 的 网 址 
http://www.phei.com.cn 到 指定 的 网 页 。 


】 口 通信 地 址 | 
C | @ fileyWD:/ 教 材 综 写 /HTML5 教 材 /ch496209620 超 链接 / 课 后 习题 /操作 是 41/4.1.HTML 人 女 | : 


电子 工业 出 版 社 
通信 地 址 : 北京 万 寿 路 173 信 箱 
由 编 : 100036 


主页 地 址 : http://www.phei.com.cn 


ww.phel.com.cn 


图 4-15 ”网 址 链接 的 效果 图 
2. 创建 网 页 实现 图 片 链 接 ， 文 件 名 为 ex4.2.html， 页 面 效 果 如 图 4-16 所 示 。 单 击 页 面 
上 的 图 片 链接 到 指定 的 网 页 。 


[YY 127,0.0.1:8848/Uniti/id4.html *% 十 


(> 127.0.0.1:8848/Unitl/14.html SE 


下 一 页 @ 中 


您 也 可 以 把 图 片 作为 链接 来 使 用 : 


图 4-16 ”图 片 链接 的 效果 图 


大 第 4 章 ” 超 链接 


3. 创建 页 面 实现 误 套 表格 ， 文 件 名 为 ex4.3.html， 页 面 效 果 如 图 4-17 所 示 。 在 表格 中 
加 入 图 像 和 超 链接 ， 网 页 围绕 一 个 主题 合理 布局 。 


图 4-17 表格 钢 套 的 效果 图 


国 表单 form 标记 与 基本 属性 
图 表单 控件 与 相关 属性 


掌握 使 用 标记 form 创建 表单 。 
掌握 表单 元 素 input 类 控件 的 使 用 。 
掌握 列表 与 下 拉 菜 单 的 使 用 。 
掌握 多 行文 本 框 的 使 用 。 
掌握 表单 元 素 的 布局 。 
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5.1 工作 场景 导入 


【工作 场景 

如 何 接收 客户 闪 不 同 用 户 关 型 的 输入 ， 回 服务 器 哨所 交 数 据 ， 服 务 器 根据 用 户 提交 的 
言 轧 将 处 理 或 者 保存 。 表 单 由 不 同类 型 的 数据 输入 框 、 控 件 、 单 选 按钮 和 提交 按钮 等 组 成 ， 
提供 与 用 户 进行 交互 的 手段 或 方式 。 

表单 弟弟 用 于 实现 用 户 注 册 、 登 录 页 面 。 下 面 束 利用 表单 中 的 元 系 控 件 完成 用 尸 登 录 、 
注册 页 面 。 

【引导 问题 】 

(1) 如 何 设置 action、method、name 等 属性 ? 

(2) 如 何 添加 <input> 元 系 到 页 面 并 设置 属性 ? 

(3) 如 何 添加 <select 元 系 ( 下 拉 列 表 ) 到 页 面 并 设置 属性 ? 

(4) 如 何 添加 <textarea> 元 素 定义 多 行 输入 字段 (文本 域 ) 到 页 面 并 设置 

($5) 如 何 使 用 <fieldset> 元 素 组 合 表单 中 的 相关 数据 ? 


属性 ? 


AS， 5.2 表单 标记 


表单 是 HIMLS 中 非常 重要 的 控件 ,表单 的 主要 功能 是 接收 用 户 的 输入 ， 及 回 服 务 器 传 
御 数 据 ， 实 现 用 户 浏览 器 与 服务 器 之 间 信 息 的 交互 。 要 创建 一 个 完整 的 表单 ， 使 用 <form> 
标 位 开始 ，</form> 结 束 ， 即 定义 表单 域 ， 如 果 不 定 义 表 单 域 ， 表 单 中 的 信息 束 无 法 传递 到 
后 台 服 务 堪 。 表 单 加 像 一 个 容器 ， 可 包 合 许多 表单 控件 。 本 章 育 先 介绍 表单 form 标签 及 相 
天 属性 ， 如 输入 类 元 素 、 多 行文 本 框 控 件 、 表 单 布 局 元 素 以 及 HIMLS 新 增 的 元 素 及 属性 。 

其 对 应 的 语法 格式 如 下 : 

<form name=" 表 单 名 称 " action=" 表 单 处 理 程 序 URL 地 址 " method=" 提 交 方 式 "> 

表单 控件 


</form> 


5.2.1 设置 表 蛙 名 称 的 name 属性 


为 了 便于 访问 才 单 域 中 的 数据 ， 区 分 每 个 表单 ， 每 个 表单 需 定 义 名 称 ，name 属性 用 于 
给 表单 命名 ， 一 般 会 设置 一 个 与 表单 完成 功能 相符 合 的 名 称 。 例 如 ， 注 册页 面 可 以 命名 为 
reglister。 登 录 页 面 可 以 命名 为 login， 其 语法 格式 如 下 : 
<form name="login"> 
表单 控件 


</form> 


到 第 5 章 表单 


5.2.2 ”表单 的 action 属性 


表单 接收 到 用 户 输 入 的 数据 后 ， 需 要 友 送 到 服务 句 病 处 理 ， 属 性 action 用 于 设置 Web 
服务 器 闹 处 理 脚本 程序 的 地 址 。 这 个 地 址 可 以 是 绝对 地 址 、 相 对 地 址 、 邮 件 地 址 每 。 例 如 : 


<form action="http://sem.buaa.edu.cn/get.]Jsp"> 


这 段 代码 指定 了 处 理 此 表单 的 程序 get.jsp， 它 位 于 服务 右 sem.buaa.edu.cn 的 根 目录 下 。 


5.2.3 设置 表单 提交 方式 的 method 属性 


属性 method 用 于 设置 表单 的 数据 提交 方式 ， 当 获取 到 表单 中 数据 并 单 击 “ 提 区 ”按钮 
时 ， 它 决定 表单 是 以 什么 形式 传递 数据 ， 其 值 可 为 post 或 者 get。 其 默认 值 为 get。 

当 method-"get" 时 ， 表 单 中 要 提交 的 数据 会 附加 在 地 址 栏 URL 之 后 ， 发 送 到 服务 器 ， 
这 种 方式 数据 不 安全 ， 保 密 性 差 ， 并 且 对 数据 的 长 度 有 限制 。 例 如 以 下 标记 

<form action="URL" method = "ge 七 "> 

提交 给 服务 右 的 形式 是 : 


"URL? namel = valuel & name2? = Vvalue? .." 


其 提交 数据 总 量 被 限制 在 255 个 字符 以 内 。 

当 method="post" 时 ， 发送 的 数据 与 URL 地 址 是 分 开 传输 的 ， 对 数据 长 度 没 有 限制 ， 浏 
昂 句 将 与 action 属性 中 指定 的 表单 处 理 服务 套 建 立 联系 ， 一 旦 建立 连接 之 后 ， 浏 览 右 了 束 会 
按 分 段 传输 的 方法 将 数据 发 送 给 服务 器 。 传 输 的 速度 比 get 慢 ， 但 数据 安全 保密 性 要 比 
get I 。 

设置 表单 提交 方式 的 语法 格式 如 下 : 

<form name="login" method=" 提 交 方 式 "> 


表单 控件 


</form> 


AS 5.3 设置 表单 输入 的 input 标记 


表单 的 mput 标记 用 于 搜集 用 户 信 息 ， 限 定 表单 内 的 输入 区 域 ， 不同 的 输入 方式 可 以 表 
示 成 文本 框 、 密 人 码 框 、 单 选 按 钮 、 复 选 杠 、 隐 马 域 、 文 件 域 、 图 片 形 式 的 图 像 按 钮 、“ 提 
交 ” 按 钮 、“ 重 置 ” 按 钮 或 “取消 ”按钮 。 以 上 这 些 是 由 属性 type 指定 的 ，type 属性 的 值 
可 为 text、radio 和 checkbox 等 。input 标记 的 属性 如 表 5-1 所 示 。 
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表 5-1 input 标记 的 属性 


属性 名 摘 述 说 明 
ype text、password、radio、checkbox、hidden、file、submit、reset、button 
name 控件 名 称 
size 该 控件 在 页 面 中 显示 的 宽度 
maxlength type=text、Ppassword 时 ， 用 户 在 该 控件 中 输入 的 信息 的 最 大 长 度 
value 诅 控 件 旺 示 的 默认 值 
readontl- 该 文本 框 中 的 内 容 只 能 读 


5.3.1 文本 框 


input 标记 中 的 type 属性 为 text 时 , 表单 输入 控件 为 文本 框 , 允许 用 户 输 入 单行 的 文本 ， 
输入 的 内 容 为 文本 、 数 字 或 者 字母 。 一 般 这 个 控件 用 来 输入 用 户 名 、 地 址 和 电子 邮件 等 信 
思 。 其 语法 格式 如 下 : 


<input 七 YPe=" 七 EXt name="™" Sljze=" " maxlength=" "” Value=" ™ readonly=" " 
dabBDle=™ ™ Checked—™" ™ 3S 


其 中 的 属性 如 表 5-2 所 示 。 
表 5-2 文本 框 的 属性 


属性 名 描述 说 明 
i 值 为 text 表示 文本 杠 
name 文本 框 名 称 ， 用 于 区 别 不 同 的 文本 框 
S1Ze 文本 框 在 页 面 中 显示 的 宽度 
maxleneth 用 户 在 文本 框 中 输入 信息 的 最 大 长 度 
value 文本 框 初始 显示 的 默认 值 
readonl 此 属性 设置 为 真 时 ， 文 本 框 中 的 内 容 只 能 读 ， 不 能 修改 编辑 
disable 此 属性 设置 为 真 时 ， 禁 用 文本 框 ， 该 文本 框 内 容 不 可 控 ， 不 可 选择 或 修改 
【实例 5.1】 设置 添加 用 于 输入 用 户 相关 信息 的 文本 框 ， 文 件 名 称 为 chapter5.1.html， 
内 容 如 下 : 
<html> 
<head> 


<title> 文 本 域 </title> 
<meta http-equiv ="content-type" content="text/html;charset=UTF-8"™ > 
</head> 
<body> 
<form name="myform"> 
<p> 姓 名 : <input type="text" name="name” value =“" 请 输入 姓名 "/></p> 


<D> 性 神 。 <input type="text" name—"gender™ maxlength = "1"/S></p> 
<p>Email: <input type="text™ name="emalill™ size="35" /></p> 
<p>PIN: <input type="text™" name="pin™" slize="18"™" /></p> 
<input type="submit™ walue="Submit™ /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter$5.1.html， 
页 面 效 果 如 图 5-1 所 示 。 


吉 | 
| 
于 


全 0 127.0.0.1:8020/ 教 材 /实例 /第 5 音 /chapt.. 


姓名 : 请 输入 姓名 


5.3.2 ”密码 框 


表单 中 密码 框 表示 的 是 用 户 输入 的 内 pe 
容 ， 在 页 面 上 内 容 以 “*” 或 者 黑色 实心 圆 点 。 PN 
显示 。 其 语法 格式 如 下 : 

<input type="password"” name=" 密 人 


控件 名 称 " size=" 显 示 的 长 度 " 
maxlength—" “ value="™" YS8adonly—" 5-1 设置 单行 文本 框 的 页 面 效 果 


" disableo—™ ™" checked—™" "> 
其 属性 基本 同文 本 框 一 样 ， 具 体 属性 参数 如 表 5-3 所 示 。 
表 5-3 密码 框 的 属性 


| Submit | 


属性 名 摘 述 说 明 
ype 值 为 password， 表 示 密 码 框 类 型 
name 密码 框 名 称 
siZe 密码 框 在 页 面 中 显示 的 宽度 
maxleneth 用 户 在 密码 框 中 输入 密码 的 最 大 长 度 
value 密码 框 初始 显示 的 默认 值 
readonl 该 属性 设置 为 真 时 ， 密 码 框 中 的 内 容 只 能 读 ， 不 能 修改 或 编辑 
disable 该 属性 设置 为 真 时 ， 禁 用 密码 框 ， 该 密码 框 内 容 不 可 用 ， 并 且 不 可 选择 或 修改 
【实例 5.2】 设 置 添加 密码 框 ， 文 件 名 称 为 chapter5.2.html， 内 容 如 下 : 
<html> 
<head> 


<title> 密 码 域 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<form 
action="http://www.w3school.com.cn/example/html/form action.asp"> 
<P> 用 户 名 : <input type="text™ name="username"/></p> 
<Pp> 密 人 码 : <input type="password”" name="password™ maxlength = "8"/></p> 
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<input type="submit™ value="Submit™ /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.2.html， 页 
面 效果 如 图 5-2 所 示 。 


G 合 |@ 1270.0.18020/ 教 材 / 实 网 /第 5 章 ， & 宜 | : 
| 用 户 名 :| 


密码 : 


5.3.3” 单 选 按钮 


单 选 按钮 也 是 设计 表单 时 第 用 的 控件 ， 使 用 
<input> 标 记 创 建 ，type 取 值 为 “radio”， 在 页 面 
上 以 圆 框 表示 。 如 在 用 尸 填 写 信息 时 ， 有 些 内 容 
需要 在 多 项 中 选择 一 个 , 则 采用 单 选 按钮 来 实现 。 
一 般 选 项 都 是 成 组 出 现 的 ， 一 组 单 选 按钮 有 相同 图 5-2 表单 中 的 密码 框 
的 name 值 ， 每 个 radio 设置 不 同 的 value 值 (传送 
到 服务 右 中 )， 但 只 能 选择 一 个 。 其 对 应 的 语法 格式 如 下 : 

<input type="radio™ name—"radiol"™ value="™valuel"” /> 选项 1 


<input type="radio™ name—"radiol"™ value="value2™ /> 过 项 2 
<input type—"radio™ name—"radiol"™ valne—"value3™ /3 逻 基 3 


其 属性 对 应 参数 如 表 5-4 所 示 。 
表 5-4 单 选 按钮 的 属性 


| | Submit | 
| 


属性 名 描述 说 明 

ype 值 为 radio， 表 示 单 选 按钮 

name 单 选 按钮 名 称 ， 用 于 区 别 不 同 组 单 选 按钮 ， 同 一 组 name 要 求 相 同 ， 必 须 相 同 ， 它 们 才能 
五 矿 

value 表示 提交 时 传 到 服务 器 上 的 值 


Teadonl 单 选 按钮 的 内 容 只 能 读 ， 不 能 修改 或 编辑 
checked 当 值 为 “checked” 表 示 该 单 选 按钮 被 选中 ， 其 中 用 圆 点 标注 


【实例 5.3】 设置 添加 用 于 选择 性 别 的 单 选 按钮 ,文件 名 称 为 chapter5.3.html， 内 容 如 下 : 


<1DOCTYEE html> 
<htm > 
<head> 
<title> 单 选 按钮 </title> 
<meta http-egquiv="content-type™" content="text/ntml;charset=UTF-8"> 
</head> 
<body> 
<form action="http://www.w3school .com.cn/example/html/form action.asp"> 
为 ; <input type="radio"™" name="gender™" value="male"™ checked="checked"/> 
us <input type="radio" name—"gender” value="female™ /> 


<input type="Submit™ value="Submit™ /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter 5.3.html， 页 面 效 果 如 图 5-3 所 示 。 
) 口 市 先 按 乌 x 全 四 
GG 台 | 台 127.0.0.1:8020/ 教 材 /实例 /第 5 章 .. 


男 : @ 女 : @ | Submit. 


5-3 ”设置 单 选 按钮 的 页 面 效果 


5.3.4 复 和 达 框 


在 网 页 上 ， 经 常 要 进行 多 项 选择 ， 如 在 用 户 网 上 购物 时 ， 用 户 可 以 同时 挑选 多 个 商品 ， 
一 般 可 以 采用 复 选 框 来 实现 。 又 如 当 用 户 注册 会 员 时 ， 系 统 会 保存 用 户 的 爱好 ， 爱 好 可 以 
是 多 个 ， 则 可 采用 复 选 框 来 实现 。 将 复 选 框 添加 到 网 页 上 ，type 取 值 为 “checkbox”， 其 实 
现 的 语法 如 下 : 


<input type="checkbox™ name="checkboxl" vlaue="valuel" checked > 或 
<input type="checkbox"™ name="checkboxl"™" vlaue="valuel™" checked="checked™ > 


其 属性 对 应 参数 如 表 5-5 所 不 。 
表 5-5 复 选 框 的 属性 


属性 名 描述 说 明 
ype 值 为 checkbox， 表 示 复 选 框 
name 复 选 框 名 称 ， 用 于 区 别 不 同 组 复 选 框 
value 表示 提交 时 传 到 服务 器 上 的 值 
readonly 复 选 框 的 内 容 只 能 读 ， 不 能 修改 、 编 辑 
checked 当 值 为 “checked” 表 示 该 复 选 框 被 选中 ， 其 中 用 对 号 标注 
【实例 5.4】 设置 用 于 选择 运动 类 型 的 复 选 框 ， 文 件 名 称 为 chapter5.4.html， 内 容 如 下 : 
<html> 
<head> 


<title> 复 选 框 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
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</head> 
<body> 
<form 
action="http://www.w3school.com.cn/example/html/form action.asp"> 
选择 你 喜欢 的 运动 : <br/> 

<inpuat tvype="checkbox™" name="football™ alne = "fn 和正 球 <br 人 
<input 七 Ype="checKkboxn name="basketball™" Value = mp" /> 篮球 <br/> 
<input type=ncheckbox” name="”"volleybal1" Value = "v"/> 排 球 <br/> 
<input type="submit™ value="Submit™ /> 


</form> 
</body> | e 
</html> 邮品 得 x Wa 
_. , GG 合 | 127.0.0.1:8020/ 教 材 /实例 /第 5 童 ..。 人 @ 信 

在 浏览 器 中 打开 网 页 文件 chapter5.4.html， Re 

. i 选择 你 喜欢 的 运动 : 
页 面 效 果 如 图 5-4 所 示 。 日 足球 

排球 


35 文件 域 Submit | 


在 网 页 上 ， 定 义 文件 域 ，type 的 取 值 为 
“file”。 一 般 是 上 传 文件 传送 给 服务 器 时 ， 
需要 填写 文件 的 路 径 ， 可 以 采用 此 控件 完成 。 
其 语法 格式 如 下 : 


<input type="file™ name="fijeld-—id™" size="n™" accept="file-type"> 


对 应 属性 参数 如 表 5-6 所 示 。 


5-4 设置 复 选 框 的 页 面 效果 


表 5-6 文件 域 的 属性 


属性 名 摘 述 说 明 
rpe 值 为 fle， 表 示 文 件 域 
name 控件 名 称 
S1Ze 输入 框 的 实际 大 小 
accept 上 传 文件 的 类 型 


【实例 5.5】 设置 上 传 文件 控件 ， 文 件 名 称 为 chapter5.5.html， 内 容 如 下 : 


<IDOCTYPE html» 
<htm]l> 
<head> 
<title> 文 件 上 传 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<form 
action="http://www.w3school.com.cn/example/html/form action.asp"> 
<input type="file™" name="f"/> 
<input type="submit"” value=" 提 交 " /> 


</form> 
</body> VD att x 国 国 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.5.html， 
页 面 效 果 如 图 5-5 所 示 。 


| 选择 文件 | 未 选择 任何 文件 


5.3.6 ”按钮 


1. Button 按钮 
在 网 页 中 ， 普 通 按 钮 也 是 常见 的 ， 普 通 按 钮 一 般 是 通过 使 用 脚本 来 确定 按钮 的 功能 。 
其 语法 格式 如 下 : 


<input type = "button™" name="button-1dq" value="button-label-text" 


图 5-5 设置 文件 域 的 页 面 效 果 


ONnC11ick—"script"> 


或 者 : 


<button type ="button|submit|reset™ name="button—1id" 
value-"init-label-text" onclick=nrscriptn> 按 钮 上 显示 内 容 
</button> 


onclick 属性 : 给 出 了 当 按 钮 被 单 击 时 激活 脚本 的 名 称 ，script 为 执行 的 脚本 内 容 。 

<button> 标 记 等 价 于 <input type ="button">， 但 <button> 标 记 提 供 了 更 为 灵活 的 样式 
定义 。 

2. 图 片 按钮 

图 所 按钮 是 指 可 以 用 在 “提交 ”按钮 位 置 的 图 片 ， 这 个 图 乒 有 按钮 的 功能 。 为 了 使 页 
面 更 丰 吝 、 更 美观 ， 可 以 使 用 图 片 作为 提交 按钮 ， 其 语法 格式 为 : 


<input type="image™ src="image—url™" height="n™" width="m" 
alt="alternative-text"™" border="0"> 


其 中 的 属性 如 表 5-7 所 示 。 
表 5-7 图 片 按 钮 的 属性 


属性 名 描述 说 明 

Vpe 值 为 image， 表 示 在 默认 情况 下 只 可 用 作 提 交 按 钮 ， 而 不 能 作为 重 置 按钮 
STC 源 图 片 文 件 的 URL 

width 图 片 的 宽度 

height 图 片 的 高 度 

alt 设置 此 属性 ， 当 无 法 看 到 图 片 时 ， 仍 然 可 以 提交 表单 


3. 提交 、 重 置 按钮 
单 击 “ 提 交 ” 按 钮 ， 会 把 表单 中 的 信息 提交 到 <form> 标 记 的 action 属性 所 指定 的 URL 
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程序 中 处 理 ， 并 按照 <form> 标 记 中 method 属性 所 指定 的 http 人 查询 类 型 的 方式 进行 提交 。 其 
语法 格式 如 下 : 


<input type="submit" value=" 提 交 "> 

按钮 ， 是 把 表单 中 的 所 有 控件 设置 为 初始 状态 。 其 语法 格式 如 下 : 

<input TE "reset™ Yamie " 包 " 

【实例 5.6】 实 现 四 种 不 同类 型 的 按钮 ， 文 件 名 称 为 chapter5.6.html， 内 容 如 下 : 


<html> 
<head> 
<title> 控 包 </title> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-8"> 
<Script type="text/Javascript"> 


function msgq() 1{ 
alert ("Hello world!™). 
| 
</ Seript> 
</head> 
</head> 
<body> 
<form action="http://www.w3school.com.cn/example/html/form action.asp"> 
<p>F1irst name: <input type="text"™" name="fname™" /></p> 
<p>Last name: <input type="text" name="lname™" /></p> 
<input type="submit" value=" 提 交 " /> 
<input type="reset"™ value=" 旱 钙 ™ > 
<input type="boutton"” valyue—=" 按 这 里 " onclick-"msg{t} "> 
<input type="imagqe" sre = "img/hand.png"” lt=" 提 区 "> 


</ form> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter5.6.html， : : 
页 面 py 果 如 图 -人 所 修 \ a | 他 各 D127.0.0.1:8020/ 笋 材 / 实 网 / 药 5 宇 /chapter5,6.html | 心 | 
First name: | 
Last name: | 


5.3.7 隐 疙 拓 
隐 沽 域 了 dh 

在 网 页 中 添加 隐藏 域 ， 其 type 的 取 值 为 
“hidden ”。 隐 茂 域 的 内 容 不 在 页 面 中 显示 出 
来 ,用 户 在 屏幕 上 不 会 看 到 该 控件 的 任何 迹象 ， 
也 无 法 更 改 该 控件 的 内 容 ， 但 <inpu 人 标记 的 图 5-6 ”设置 不 同类 型 的 按钮 的 页 面 效果 
value 属性 作为 表单 数据 随 看 name 属性 传送 出 
去 。 其 语法 格式 如 下 : 


<input tvype="™hidden™” name=" 名 称 " Tal06=" 值 "3S 


【实例 5.7】 实 现 隐 茂 域 ， 文 件 名 称 为 chapter5.7.html， 内 容 如 下 : 


<1IDOCTYPE html»> 
<html> 
<head> 
<title> 隐 藏 域 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<formaction="http://www.w3school.com.cn/example/html/form action.asp"> 
<p>First name: <input 
type="text"™" name="fname™" /></p> 


<p>Last name: <input | 7 口 阳 可 大 x 
type="text" name="lname" /></p> | C 全 [© 1770018020/8/ 出 当 5 训 /chapter57.html 交 | ; 
<input type = "hldden" name i 
= "type™" Value = "secret"/> Last name: 


<input type="submit™" 
value=" 提 区 " /> 


| 


</form> 
</body> 
<htm]l> 
在 浏览 器 中 打开 网 页 文件 chapter5.7.html， yp 
页 面 效 果 如 图 5-7 所 示 。 图 5-7 ”设置 隐藏 域 的 页 


“5.4 下 拉 列 表 杠 


下 拉 列 表 框 ， 一 般 是 在 选择 项 比较 多 的 时 候 用 到 ， 比 单 选 按钮 节省 页 面 空 间 。 表 单 中 
下 拉 列 表 框 是 采用 标记 <select 信 和 <option> 实 现 的 ， 其 对 应 的 语法 格式 如 下 : 


<select. name—"text 1d" size—"n™ mltiple> 
<option Value="cholce-1d 1" selected>textlabell</opt1ion> 


<option Value="cholce-1d m" selected>textlabel</option> 
</select> 


其 中 的 属性 如 表 5-8 所 示 。 
表 5-8 下 拉 列 表 框 的 属性 


属性 名 描述 说 明 
slze 窗口 中 显示 的 选项 数 ， 默 认 值 为 1<size>， 则 下 拉 列 表 将 变 为 滚动 菜单 


multiple 将 选择 区 域 设 置 为 可 以 接收 任意 数目 的 选项 ， 按 下 Ctrl 键 单 击 选 项 即 可 选择 多 个 选项 
option 有 基体 葬 首选 项 
标示 列表 中 的 项 目 ， 被 选中 选项 的 value 属性 与 表单 数据 一 起 发 送 给 表单 处 理 程序 。 如 果 
没有 设置 value 属性 ， 那 么 将 用 选项 的 内 容 代 普 
selected 指定 默认 选项 ， 可 以 设置 多 个 默认 项 ， 但 必须 使 用 multiple 


value 
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【实例 5.8】 添 加 选择 球 关 型 的 下 拉 列 表 ， 文 件 名 称 为 chapter5.8.html， 内 容 如 下 : 


<html> 
<head> 
<title> 下 拉 列 表 框 </title> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-8"> 
</head> 
<body> 
<form action="http://www.w3school.com.cn/example/html/form action.asp"> 
<Select name = "sports"S> 
<option value = "footbalL1"> 足 球 </option> 
<option value = "basketball"> 篮 球 </option> 
<option value = "volleyball" 


selected="selected"> 排 球 </option> A 0 
</aelecty> 它 全 a 127.0.0.18020/ 孝 材 /实例 /第 5 齐 /chapters.B.html 急 人 安 | ; 
<input type="submit"™" value= FEE 

提交” /> 

</form> 
«</body> 
</html> 


在 浏 斋 器 中 打开 网 页 文件 chapter5.8.html， 
页 面 效 果 如 图 5-8 所 示 。 


图 5-8 设置 下 拉 列 表 框 的 页 面 效 果 
“5.5 文本 域 


在 网 页 中 ， 一 般 用 来 发 表 评论 或 者 是 输入 较 多 的 内 容 时 ， 可 采用 文本 域 (也 称 多 行文 本 
框 ) 标 记 <textarea></textarea> 来 实现 。 其 对 应 的 语法 格式 如 下 : 

<textarea name="text—ld" rows="n" cols="m" wrap="virtuallphysical|off" 

readonly> 


i1nitial content 
</textareay> 


其 中 的 属性 如 表 5-9 所 示 。 


表 5-9 属性 表 
属性 名 描述 说 明 
name 控件 名 称 
TOWS rows 指定 文本 域 的 高 度 
cols cols 指定 文本 域 的 宽度 
wrap 属性 设置 为 virtual 或 physical。 当 用 户 输入 的 一 行文 本 长 于 文本 域 的 宽度 时 ， 
es 浏览 器 会 自动 将 多 余 的 文字 挪 到 下 一 行 ， 在 文字 中 最 近 的 那 一 点 换行 
readonl' 表示 只 能 读 内 容 ， 不 能 修改 编辑 
RRO 
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【实例 5.9】 添加 用 于 评论 的 文本 域 ， 文 件 名 称 为 chapter5.9.html， 内 容 如 下 : 


<IDOCTYPE html> 
<htm]l> 
<head> 
<title> 文 本 域 </title> 
<meta http-egquiv="content-type™" content="text/ntml;charset=UTF-8"> 
</head> 
<body> 
<form action="http://www.w3school .com.cn/example/html/form action.asp"> 
评论 : <br/> 
<textarea 下 SG = “comment™” TOwSs = "8" C01s = 15"2> 请 在 这 里 稍 入 </EExzEareas> 
<br/> 
<input type="submit"” Value=” 提 交 ” /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.9 html， 页 面 效果 


它 | 加 127.00.18020/ 狐 材 /实例 /第 5 享 /chaptersgntml 已 家 | ; 


5-9 设置 文本 域 的 页 面 效果 


AS 5.6 表单 分 组 


《fieldset> 元 素 可 将 表单 内 的 相关 元 素 分 组 。《legend> 元 素 为 fieldset 提供 了 标题 。 其 语 


法 格式 如 下 : 
<fieldset> 
<legend> 标 题 </1legend> 
</freldset> 


【实例 5.10】 设 置 表单 元 素 的 分 组 ， 文 件 名 称 为 chapter$5.10.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<title> 表 单 分 组 </title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
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</head> 
<body> 
<form> 
<fieldset> 
<legend>health information</legend> 请 六 素 单 分 组 
haeight: <input type—"text"/SZbry> C 合 |@ 127.00.1:8020/ 教 材 / 笠 例 /第 5 童 .。 和 @ 宣 | 3 
welght: <input type="text"/> health information 
</fieldset> height: 
</form> weight 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter5.10.html, 页 面 
效果 如 图 5-10 所 示 。 图 5-10 设置 表单 分 组 的 页 面 效 果 


售 ，5.7 ”快捷 键 及 提示 


accesskey 属性 可 以 按照 Tab 键 的 跳 转 顺序 ， 或 者 设置 accesskey = “字母 ”时 可 以 通 
过 直接 按 Alt + 字母 访问 该 表单 项 。 

【实例 5.11】 设 置 Tab 键 ， 可 以 实现 按 tabindex 属性 值 的 顺序 跳 转 访问 该 表单 项 ， 同 
时 也 可 以 直接 点 击 Alt+ 字母 访问 该 表单 项 ， 文 件 名 称 为 chapter5.11.html， 内 容 如 下 : 


<1IDOCTYPE html> 
<html> 
<head> 
<title> 快 捷 键 </title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
</head> 
<body> 
<form> 
<fieldset> 
<legend>health information</legend> 
age:<input type="text" 


ees "ahr > | 9 D 
gender:<input type= | AD 
"EE "= ] C 全 | 127.0.0.1:8020/ 台 材 /实例 /第 5 章 .， 和 @ 六 
"请 输入 男 或 者 女 "/><br/> health information 
height: <input accesskey = age: 
"hh™" type="text"/><br/> gender: [ER 
</fieldset> height: 

</form> 

</body> 
</html> 
在 浏览 堪 中 打开 网 页 文件 chapter5.11.html， 5-11 ”设置 快捷 键 及 提示 的 页 面 效果 


页 面 效 果 如 图 5-11 所 示 。 
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5.8 ”HTMLS5 新 增 元 素 


5.8.1 input 元 又 


1. url 类 型 


input 元 系 里 的 type="url" 表 示 该 文本 框 是 专门 用 来 输入 URL 地 址 的 。 表 单 提 交 时 ， 厂 
输入 的 不 是 URL 时 ， 则 提示 内 容 不 符合 要 求 。 其 语法 格式 如 下 : 


<input type="url™” name="user url™ /> 


【实例 5.12】 设置 url 类 型 控件 ， 文 件 名 称 为 chapter5.12.html， 内 容 如 下 : 


<IDOCTYPE html»> 
<htm]l> 
<head> 
<meta charset="UTF-—8"> 
<titlesyUyRL</title> 
</head> 
<body> 
<form method="get"> 
某 网 址 : <input type="url" name="URL™" /><br /> 
<input: type—"submit"™” walue—" 提 区 "> 


</form> 
</body> 
</html> 
I urL 
在 浏览 器 中 打开 网 页 文件 chapter5.12.html， ee | @ 127.0.0.1.8020/ 教 材 /实例 /第 5 齐 .， Q@& 伍 | ! | 
页 面 效果 如 图 5-12 所 示 。 时 网 址 : http-www njcitcn 

. | 提交 

2. email 类 型 


input 元 北 里 的 type="email"， 则 表示 用 户 
在 文本 框 中 输入 的 E-mail 地 址 ， 只 是 验证 是 否 
符合 E-mail 地 址 的 要 求 ， 不 对 地 址 是 否 存在 进 
行 验证 ;大 不 是 E-mail 地 址 ， 提 示 不 允许 提交 5-12 ”设置 输入 url 类 型 控件 的 页 面 效果 
表单 。 其 语法 格式 如 下 : 


<input type="email" name="user emall™" /> 


【实例 5.13】 实 现 了 用 于 输入 E-mail 地 址 的 文本 框 ， 并 且 在 点 击 提交 按钮 时 ， 会 对 在 
该 文本 框 中 输入 的 内 容 是 否 为 邮件 地 址 进行 验证 ， 文 件 名称 为 chapter5.13.html， 内 容 如 下 : 

<!1DOCTYPE html> 

<html> 


<head> 
<meta charset="UTF 8"™"»> 
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<title>E-mail</title> 
</head> 
<body> 
<form method="get™"> 
E-mail: <input type="emalil" 


Wm Ei EE II 
name="user email™" /><br /> 四 读 在 电子 邮 伯 地址 中 包 


<input type="submit"™ /> i 


</form> 


</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.13.html， 
页 面 效 末 如 图 5-13 所 示 。 

3. date 类 型 

input 元 素 中 type="date" 表 示 该 控件 用 于 输入 日 期 , 例如 要 输入 购物 日 期 、 发布 日 期 等 。 
以 弹出 日 历 的 形式 由 用 户 选 择 填 入 。 其 语法 格式 如 下 : 

<input type="date™" name="date"™ /> 


【实例 5.14】 设 置 date 日 期 控件 ， 文 件 名 称 为 chapter5.14.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-— 8"> 
<title>Date</title> 
</head> 
<body> 
<form method="get™"> 
订购 日 期 : <input type="date"™ name="date"™" /><br /> 
<input type="submit™ /> 


图 5-13 ”设置 email 类 型 控件 的 页 面 效 果 


</form> 
</body> 
</html> 
在 浏览 右 中 打开 网 页 文件 chapter5.14.html， 页 面 效 果 如 图 5-14 所 未 。 
4.time 类 型 
Input 元 素 中 type="time" 表 示 该 文本 框 控件 用 于 输入 时 间 。 会 对 文本 框 中 的 时 间 有 效 性 
进行 验证 。 


【实例 5.15】 设置 time 类 型 控件 ， 文 件 名 称 为 chapter5.15.html， 内 容 如 下 : 


<1IDOCTYEE HTML> 
<html> 
<head> 
<title>time</title> 
<meta http-equliv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
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<form method="get™"> 


提交 时 间 : <input type="time" name="time™ /><br /> 
<input type="submit"” values=n 提 交 "” /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.15.html， 页 面 效 末 如 图 5-15 所 示 。 
input 中 type"datetime-local" 表 示 访 文本 框 控 件 用 于 输入 本 地 日 期 和 时 间 ; 表单 提交 时 ， 
会 对 文本 框 中 的 日 期 和 时 间 的 有 效 性 进行 验证 。 


F , Se 一 口 XX | a [> 三 
rm date x We y [| time 其 人 
:8020/ 教 村 /实例 /第 5 章 /chap... - 和 J fa < 本 | /ac 音 
GG 全 | @ 127.0.0.1:80 |/ 押 chal 全 | : CG 个 127.0.0.1:8020/ 教 材 / 实 例 /第 5 章 .. 


订购 日 期 : |2018/03/03 x$ vv 


| 提 艾 时间: | 02:58 


提交 2018 年 03 月 = 本 重 k | ] 提交 

周 日 周一 周二 周三 周 四 周 五 周 六 

1 2 3 

| 与 各 了 后 身 10 

11 过 13 | 15 全 17 

1 和 9 19 20 21 22 23 2 

25 26 2r 28 29 30 31 

图 5-14 设置 date 类 型 控件 的 页 面 效果 5-15 设置 time 类 型 控件 的 页 面 效 果 


【实例 5.16】 设 置 datetime-local 控件 ， 文 件 名 称 为 chapter5.16.html， 内 容 如 下 : 


<lDOCTYPE HTML> 
<html> 
<head> 
<title>datetime—local</title> 
<meta http-equiv="content-type™" content="text/nhntml;charset=UTF-8"> 


</head> 
<body> 

<form Imethod= -get > 

提交 时 间 : <input type="datetime-local™ name="datetime" /><br /> 
<input 七 Ype="submit"” value=" 提 区 "” /> 

</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.16.html， 页 面 效 果 如 图 5-16 所 示 。 
5. month 类 型 
input 中 type="month" 表 示 的 是 用 户 输 入 月 份 的 文本 框 ， 当 表单 提交 时 也 同样 会 对 该 文 
本 框 中 的 数据 进行 验证 。 
【实例 5.17】 设 置 month 类 型 的 控件 ， 文 件 名 称 为 chapter5.17.html， 内 容 如 下 : 


<1IDOCTYPE HIML> 
<html> 
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<head> 
<meta http-equiv="content-type" 
content="text/html;charset=UTF-8"> 
</head> 
<DOQV> 
<form Imethod= 9et > 
月 从，<inpat type="month" mamne=rmonth]” /><br /> 
<input type="submit™ /> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter5.17.html， 页 面 效 果 如 图 5-17 所 示 。 


和 
vy DB maenth 


局 人 梧 | 命 127.0.0.1:8020/ 教 材 / 袜 例 /第 5 章 /chapter5.17.h.. 


sa "| 


G | @ 127.0.0.1:8020/wysj/new filehtml Q& 友 | : 
20189F04 月 = 


是 交 时 间 : | 2018/05/01 23: 醒 x$™| 局 上 局 局 - 局 周 四 局 五 周 六 
一 : 1 .| | 9 6 
所 交 : 


[ 127.0.0.1:8020/wysj/ne x 


图 5-16 ”设置 datetime-local 类 型 控件 的 页 面 效果 图 5-17 设置 month 类 型 控件 的 页 面 效 果 
6. week 类 型 


input 中 type= "week" 表 示 是 一 种 专门 用 来 输入 多 少 周 的 文本 框 , 当 和 表单 进行 提交 时 会 对 
该 文本 框 中 的 数据 进行 验证 。 
【实例 5.18】 设 置 week 类 型 的 控件 ， 文 件 名 称 为 chapter5.18.html， 内 容 如 下 : 


<1IDOCTYPE HTML»> 
<html> 
<head> 
<title>week</title> 
<meta http-equiv="content-type" 
content="text/html ;charset=UTF-—-8"> 


</head> | 
<body> GQ 侣 |@ 1270.0.18020/ 禾 材 / 实 岗 第 5 齐 。 QQ 让 | : 
<form method="get"> 
<input type="week™ /><br /> | 提交 | 
<input type="submit™ /> 
</form> 
</body> 
</html» 


在 浏 贤 器 中 打开 网 页 文件 chapter5.18.html， 
页 面 效 果 如 图 5-18 所 示 。 


图 5-18 设置 week 类 型 控件 的 页 面 效 果 


5.8.2 input 属性 


1. formaction 属性 


在 HIMLS 中 ，formaction 属性 是 表示 单 击 不 同 按钮 (适用 submit、image)， 实 现 重 新 定 
义 表单 的 action 属性 ， 单 击 不同 的 按钮 可 以 把 表单 提交 到 不 同 的 页 面 。 

【实例 5.19】 设置 formaction 属性 : 单 击 “ 登 录 ” 按 钮 ， 表 单 提交 到 login.html 页 面 ; 
单 击 “注册 ”按钮 ， 表 单 提 交 到 register.html。 文 件 名 称 为 chapter5.19.html， 内 容 如 下 : 


<lDOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type™" content="text/ntml;charset=UTF-8"> 
<title>formaction 属性 </title> 
</head> 
<body> 
<Torm method="get™"> 
<input type="submit"™" name-"submit" value=" 登 录 " 
formaction="]ogin.html"/><br /> 
<input type="submit"™ name="submit" value=" 注 册 " 
formaction="register.html"/> 
</form> 
</body> 
</html> 


2. formmethod 属性 


在 HIMLS 中 ，formmethod 属性 是 指定 表单 的 提交 方法 。 
【实例 5.20】 设 置 formmethod 属性 ， 文 件 名 称 为 chapter5.20.html， 内 容 如 下 : 


<IDOCTYPE HTML> 
<html> 
<head> 
<title>formmethod</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
</head> 
<body> 
<form method="get™"> 
<xinput type="submit™" name—"submit™ Value=” 全 孙 ” 
formaction="]ogin.html" formmethod= “get /> 
<br /> 
<input type="submit" name="submit" value=" 注 册 " 
formaction="register.html™" formmethod= “post /> 
</form> 
</body> 
</html> 
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3. placeholder 属性 


placeholder 属性 表示 当 文 本 框 处 于 未 获得 焦点 时 ， 提 示 用 户 信 息 ， 有 具体 信息 内 容 由 
placeholder 指定 ; 当 文 本 框 获得 焦点 时 ， 提 示 文 本 信息 消失 。 
【实例 5.21] 设置 placeholder 属性 ， 文 件 名 称 为 chapter5.21.html， 内 容 如 下 : 
<IDOCTYPE html> 
<htm]> 
<head> 
<meta charset="UTF 8"> 
<title>placeholder</title> 
</head> 
<body> 
<form id="myform" method="get"> 
用 户 名 ，<input type="text"” placeholder=" 请 输入 用 户 名 "> 
</form> 
</body> 
<htm]> 


当 页 面 初始 显示 时 ， 文 本 框 中 显示 
placeholder 中 的 提示 信息 ， 当 鼠标 指针 在 文本 框 
中 ， 提 示 信 息 消 失 。 其 运行 效果 如 图 5-19 所 示 。 

4. autofocus 属性 


autofocus 属性 表示 表单 元 率 获 得 焦点 。 一 般 
会 在 form 表单 第 一 元 素 上 。 

【实例 5.22】 设 置 autofocus， 文 件 名 称 为 
chapter5.22.html， 内 容 如 下 : 


六 口 127.0.0.18020mwebyinc x WN 


证 Lo 1270.01:80201web/ ndex.htrmmn| 


用 户 名 : | 请 给 入 用 户 名 ] 


<htmi|l» 
<head> 
<title>autofocus</title> 


图 5-19 设置 placeholder 属性 的 页 面 效果 


<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<Iform method="get™"> 
用 户 名 :<input type-"text" name="username™" autofocus="autofocus"/><br /> 
密 &nbsp; &nbsp; &nbsp; 公 :<input type="password" name="username" /><br /> 
</form> 
</body> 
</htm]l> 


在 浏览 器 中 打开 网 页 文件 chapter5.22.html， 页 
面 效果 如 图 5-20 所 示 。 


5. list 属性 


list 属性 是 为 单行 文本 框 添加 一 个 属性 list， 访 
list 的 值 对 应 着 datalist 元 素 中 的 id 的 值 。 该 文本 框 图 5-20 ”设置 autofocus 属性 的 页 面 效 果 


类 似 于 下 拉 列 表 框 select。 
【实例 5.23】 设 置 list 属性 ， 文 件 名 称 为 chapter5.23.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<title>datalist</title> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 
</head> 
<body> 
<form method="get™> 
<1input type="™ 11ist="course™> 
<datalist id="course"> 
<option>HTMLS5</opt1ion> 
<option>css3</opt1ion> 


# [1 datalist 


CG | D127.0.0.1:8020/30t4/... 


<option>Javascript</option> 


</datalist> i 
</form> javascript 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter5.23.html， 
页 面 效 果 如 图 5-21 所 示 。 图 5-21 设置 list 属性 的 页 面 效 果 


Sa 5.9 回 到 工作 场景 


前 面 几 节 介 绍 了 如 何 创 建 表 单 、 文 本 框 、 下 
拉 列 表 框 以 及 文本 域 等 ， 下 面 是 几 个 综合 示例 ， 
回 到 前 和 面 介绍 的 工作 场景 中 ， 人 完成 工作 任务 。 
【工作 过 程 一 】 完 成 示 购 物 网 站 的 用 户 登 录 
页 和 面 ， 页面 中 有 “账号 ”文本 框 、“ 密 码 ” 文 本 
框 和 “登录 ”按钮 。 在 浏览 匿 中 打开 网 页 文件 
chapter$.24.html， 页 面 效 果 如 图 5-22 所 示 。 
创建 网 页 文件 ， 其 名 称 为 chapter5.24.html， 
样式 表 文 件 为 css01.css， 内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<titieSLoqnnmtilles 
<1LInk Pel—"styhesheet™ type— "text/ess”" href=—" os/esss.24.0C358" /> 
</head> 
<body> 
<d1lv> 


图 5-22 用户 登 录 页 面 效果 
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<table width="300"™" height="138"™ border="0" cellpadding="0" 
cellspacing="0"™ > 
<form name~="userform” method="post™ > 
<tr height="25" align="center™> 
<td height="5" align="center"™" valign="middle"> 


<td align="center™" walign="middle"></td> 
<iir> 
<tr align="center™> 
<td width="129"™ helght="25" align="center™" valign="middle"> 
账 gnbsp; gnbsp; 写 : </td> 
<tqd width="171"™" height="25™ align="left" 
valign="middle"> 
<input name="name" type="text"™ size="]17"> 
<# td 
</tr> 
<tr align="center"><td height="25" align="center" 
valign="middle™"> 
蜜 &nbspy&nbsp; 码 : </td> 
<td 引 1Lgn="1eft"” valign="middle"™"> 
<input name="password" type="password"™" slize="]7"></td> 
< E> 
<tr align="center™"> 
<td height="25"™" align="center™" valign="middle" 
colspan—"3"> 
<input type="image™ src="img/fg—-land.gif™" width="51" 
height="20"> 
< href—"#"3 福 册 </a> 
<a href="#"> 找 回 密码 </a> 


</td> 
</tr> 
</form> 
</table> 
</div> 
</body> 
</html> 
【工作 过 程 二 ] 完成 某 购 物 网 站 的 用 户 注册 。 ”局 侈 识 
页 面 ， 设 置 用 户 的 用 户 名 称 、 用 户 密码 、 密 但 确 用 户 名 称 : 
认 、 真 实 姓名 、 手 机 号 码 及 邮件 地 址 ， 并 且 添 加 ne 
“提交 ”按钮 、“ 重 置 ”按钮 和 “返回 ”按钮 SR 
在 浏览 器 中 打开 网 页 文件 chapter5.25.html, 页 面 #HS: | 


邮件 地 址 : 


效果 如 图 5-23 所 示 。 
创建 网 页 文件 ， 其 名 称 为 chapter5.25.html， 


内 容 如 下 : 5-23 用户 注册 页 面 
<lIDOCTYPE html»> 
<htmi|l>»> 
104 


| 第 5 章 表单 
<head> 


<meta charset="UTF-—8"> 
<title>reglister</title> 
</head> 
<body> 
<div><table align="center™ width="700px"> 
<tr align="left™> 
<td colspan="2"><1img src—"1img/fgl .Jpg"></td> 


</tr> 
</table> 
<table align="center™"> 
<tr> 
<td width="20%"™ align="center™"> 
用 户 名 称 : 
</td> 
<td> 
<input type="text"> 
</td> 
<itr> 
< 
<td width—"20%"> 
用 户 密码 : 
</td> 
<td> 
<input type="text"> 
</td> 
</tr> 
<Lr> 
<td width="20%"> 密 码 确认 : </tqd> 
<td><input type="password"></td> 
< Er> 
«LES 
<td wigdth="20%"> 真 实 姓 名 </td>: 
<td><input Type—"text™ value— "ser" ></ td> 
< CES> 
i 
<td width="20%"> 手 机 号 码 : </td> 
<td ><input type="text™" value="15350505056"></td> 
Er 
<tr> 
<td width="20%"> 邮 件 地 址 : </tq> 
<td><input type="text™ value="user"></td> 
</tr> 
“人 


<td colspan="2" >t&nbsp; tnbsp; tnbsp; tnbsp; 
<input type="image" src="img/save.]Jpg"> 
<input type="image™" src="img/clear.gif"> 
<input type="image" src="img/back.gif"> 
</td> 
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/tr 
</table> 
</div> 

</body> 
</html> 


Rw 5 10 晴 焉 作 实 训 至 


5.10.1 训练 实例 


1. 训练 内 容 

目 行 设计 一 个 页 面 ， 其 中 有 文本 框 、 密 码 框 、 单 选 按 钮 、 复 选 框 、 多 行文 本 框 、 下 拉 
列表 框 和 按钮 。 

2. 训练 目 比 


> ”和 擎 握 不 同 输入 控件 的 添加 。 
> 掌握 下 拉 列 表 框 的 添加 及 设置 。 
> 掌握 各 种 不 同 按 钮 的 设置 及 作用 。 


3. 训练 过 程 

参照 5.2 一 5.6 节 中 的 操作 步骤 。 

4. 技术 要 点 

注意 一 些 表 单 及 表单 元 素 属 性 的 设 定 。 


5.10.2 ”工作 实践 常见 问题 解析 


【和 见 问 题 】 经 第 会 出 现 页 面 上 有 了 两 个 单 选 按钮 ， 能 同时 选中 吗 ? 
【 答 】<input type=radio” name=“”> 单 选 按钮 标记 中 name 属性 值 不 一 致 ， 会 导致 
不 是 一 组 单 选 按钮 ， 如 下 所 示 。 
<form> 
<input type="radio"™ name="genderl"> 刚 
<input type="radio™" name-="gender2"> 女 
</form > 


其 效果 图 如 图 5-24 所 示 。 


癌 单 选 按钮 Xx 
CG 合 127.0.0.1:8020/ 教 材 /实例 /第 ... 所 让 | : 


@ 女 @ 男 


5-24 ”选中 两 个 单 选 按钮 的 效果 图 


这 样 ， 两 个 单 选 按钮 可 以 被 同时 选中 。 因 此 可 以 修改 两 个 单 选 按钮 中 属性 name="gender"， 
即 可 设置 同一 组 单 选 按钮 。 


售 ，5.11 本 章 小 结 


表 时 是 网 足 上 用 于 用 户 与 服务 器 端 交 互 ， 接 收 用 尸 输入 信息 的 元 系 ， 用 <form> 标 记 来 
定义 。 表 单 中 的 控件 很 多 ， 主 要 有 如 下 几 个 。 

(1) <input>, 可 以 通过 属性 type 表示 类 型 设置 不 同 的 控件 , 有 文本 框 、 密 码 框 、 隐 藏 域 、 
单 选 按钮 、 复 选 枉 、“ 提 交 ” 按 钮 (也 可 以 用 图 片 来 代 荐 外“ 重 置 ”按钮 和 普通 按钮 。 

> ”tabindex 属性 ， 指定 在 表单 中 访问 各 个 控件 的 顺序 。 

> ”accesskey 属性 : 为 访问 者 提供 键盘 上 的 菏 个 按键 ， 以 便 直 接 访 问 表单 标记 。 

(2) 通过 <select><option></option></selec 全 标记 实现 下 拉 列 表 框 控件 。 

(3) 通过 <textarea></textarea> 实 现 多 行文 本 框 。 

(4) <form> 标 记 有 两 个 重要 的 属性 : action 和 method。 

> ”action 属性 : 指定 表单 处 理 程序 的 URL。 

> method 属性 : 指定 如 何 将 表单 数据 发 送 给 服务 器 。 


15.12 可 动 


一 、 选 择 题 
1. 下 列表 示 图 片 按钮 的 type 属性 值 的 是 ( » 

A. button B. submit C. reset D. 1mage 
2. 表单 提交 的 方式 是 ( 。 )， 

A. action B. method C. name D. class 
3. 设置 单 选 按钮 为 同一 组 ， 哪 个 属性 的 值 必 须 相 同 ? (  ) 

A. text B. name C. value D. type 
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4. “ 重 置 ”按钮 的 type 属性 值 是 (  )。 


A. button B. submut C.image D. reset 
S$. <input accesskey='"u"/> 该 控件 的 快捷 键 组 合 是 ( ” )。 
A.Alt+U B. CtrlHU C. Ctrl+AlttU D. Shift+U 
二 、 填 空 题 
1. 表单 是 Web 和 Web 之 间 实 现 信 息 交 流 和 传递 的 桥梁 . 
2. 表单 是 由  _ 标记 设 定 ; 提交 方法 是 由 属性 设 定 ; 表单 提交 后 ， 交 给 
指定 的 程 夺 处 理 ， 由 属性 指定 。 
3. 表单 元 素 为 单 选 按钮 组 的 type 类 型 设置 为 复 选 框 type 类 型 设置 
为 


4. 用 来 输入 密码 的 表单 标记 是 。 
5.、 创建 下 拉 列 表 使 用 和 标记 .。 


三 、 控 作 题 
创建 网 页 ， 文件 名 为 ex5.1.html， 页 面 效 果 如 图 5-25 所 示 ， 完 成 该 表单 设计 。 


/中 过 冻 习 x 
CG 合 | 127.0.0.1:8020/ 教 材 /习题 /第 5 章 /ex1.html 

基本 信息 

姓名 : | 

E_mail 邮箱 : | 

Web: | 运 择 

评论 : 


默 认 保 存 信息 
不 保留 原来 信息 


图 5-25 表单 设计 


面 
可 marquee 标记 
| video 标 记 


加 党 
党 握 使 用 
国 ” 堂 握 marquee 标 1 
等 握 e 标记 米 设 置 又 
人 使 用 qudio 标 a 坟 设 于 
掌握 使 用 vid 示 记 来 设置 播放 音 HE 
TU 标记 来 设置 播放 百 频 
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Sa 6.1 工作 场景 导入 


【工作 场景 

网 页 效果 丰富 多 彩 ， 除 了 精美 的 图 片 和 文字 ， 也 离 不 开 炫 动 的 效果 ， 例 如 : 文字 能 否 
滚动 起 来 ? 网 页 中 是 否 能 播放 音频 和 视频 ? 

下 面 需要 制作 两 个 网 页 ， 其 中 ，《 运 动 中 的 动物 》 带 有 滚动 的 文字 和 图 片 ，《 海 滩 ) 
有 可 播放 的 音频 和 视频 。 

【引导 问题 】 

(1) 怎样 设置 文字 滚动 显示 ? 

(2) 怎样 设置 播放 音频 ? 

(3) 怎样 设置 播放 视频 ? 


“6.2 设置 文字 滚动 


marquee 标记 是 HIML 标记 中 滚动 显示 文字 的 标记 。marquee 标记 的 语法 格式 如 下 : 
<marquee> 深 动 显示 文字 </marquee> 
marquee 标记 可 以 用 来 设置 深 动 显示 文字 的 多 个 属性 ， 内 容 包 括 深 动 的 方 回 、 深 动 的 方 
式 、 和 循环 次 数 、 滚 动 速度 、 停 顿时 间 、 水 平 对 齐 和 垂直 对 齐 ， 以 及 滚动 区 域 的 背景 色 、 帘 
度 和 高 度 等 。marquee 标记 的 属性 如 表 6-1 所 示 。 
表 6-1 marquee 标记 的 属性 


属 性 摘 ” 述 
direction 该 属性 设置 文字 滚动 的 方向 ， 默 认 值 为 left 
alternate 该 属性 设置 文字 滚动 的 方式 ， 默 认 值 为 scroll。alternate 指 文 
behavior scroll 字 来 回 交 蔡 深 动 ，scroll 指 文字 循环 滚动 ，slide 指 文字 深 动 一 
slide 次 即 停止 深 动 
loop 该 属性 设置 文字 滚动 的 次 数 


scrollamount 正 整 数值 (pixels) 该 属性 设置 文字 滚动 的 速度 


scrolldela; 正 整 数值 ( 坚 秒 数 ) 该 属性 设置 文字 滚动 的 延 时 
该 属性 设置 文字 滚动 范围 的 背景 颜色 


width 整数 值 (pixels) 该 属性 设置 文字 滚动 范围 的 宽度 
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续 表 
属性 描述 
height 整数 值 (pixels) 该 属性 设置 文字 滚动 范围 的 高 度 
hspace 整数 值 (pixels) 该 属性 设置 文字 滚动 范围 距 周围 的 空白 区 域 的 高 度 
wspace 整数 值 (pixels) 该 属性 设置 文字 滚动 范围 距 周 围 的 空白 区 域 的 宽度 
lett 
align center 该 属性 设置 滚动 文字 的 水 平 对 齐 方式 ， 默 认 值 为 left 


valign 该 属性 设置 滚动 文字 的 垂直 对 齐 方式 ， 默 认 值 为 middle 


【实例 6.1】 设 置 文字 演 动 的 方 回 ， 文 件 名 称 为 chapter6.1.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 设 置 文字 深 动 的 方 同 </title> 
</head> 
<body> 
<marquee> 默 认 的 文字 滚动 方 同 </marquee> 
<marquee direction="leftn"> 文 字 回 左 滚动 </marduee> 
<marquee direction="up"> 文 字 问 上 滚动 </marquee> 
<marquee direction="right"> 文 字 癌 右 深 动 </marquee> 
<marquee direction="down"> 文 字 回 下 滚动 </marquee> 
</bhody> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter6.1.html， 页 面 效果 如 图 6-1 所 示 ， 默 认 的 文字 滚动 广 
回 是 目 右 问 左 。 
十 
QD 127.0.0.1:8020/ 第 6 章 /chapter6.1.html?  ... 


默认 的 文字 滚动 方向 


文字 向 右 深 动 


6-1 设置 文字 滚动 的 方向 的 页 面 效果 
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【实例 6.2】 设 置 文字 滚动 的 方式 ， 文 件 名 称 为 chapter6.2.html， 内 容 如 下 : 


<1DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 文字 滚动 的 方式 </title> 
</head> 
<body> 
<marquee> 上 默认 的 文字 滚动 方式 </margquee> 
<marquee behavior="alternate"> 文 字 来 回 交 替 深 动 </marquee> 
<marquee behavior="scroll"> 文 字 循 环 滚动 </marquee> 
<marquee behavior="slide"> 文 字 深 动 一 次 即 停止 深 动 </marquee> 
</body> 
</html> 


在 浏览 右 中 打开 网 页 文件 chapter6.2.html， 页 面 效果 如 图 6-2 所 示 ， 上 默认 的 文字 深 动 方 
式 是 文字 来 回 交 蔡 深 动 。 


局 二 口 A 


) 口 设置 文字 滚动 的 方式 x， 
G | © 127.0.0.1:8020/HTML5%2bCSs3%2bJavaScript 网 页 设计 实用 教程 /实例 /第 6 章 /chapte.， 友 | : 
歌 认 的 [ 字 深 动 方式 
Ww 字 来 回 交 鞋 滚动 
区 字 特 环 滚动 
台 字 深 动 一 次 即 停 | 上 变动 


6-2 ”设置 文字 滚动 方式 的 页 面 效果 
【实例 6.3】 设 置 文 字 深 动 的 次 数 ， 文 件 名 称 为 chapter6.3.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 设 置 文字 滚动 的 次 数 </title> 
</head> 
<body> 
<marduee> 默 认 的 文字 滚动 次 数 </marduee> 
<marquee loop="1"> 文 字 深 动 1 次 </marqueey> 
<marquee Loop="3"> 文 字 滚 动 3 次 </marquee> 
</body> 
</html> 
ee eee ee ete ete 
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在 浏览 器 中 打开 网 页 文件 chapter6.3.html， 页 面 效 果 如 图 6-3 所 示 ， 默 认 的 文字 滚动 次 
数 是 无 穷 次 。 


站 设置 文字 滚动 的 次 数 \ 
GG | 加 127.0.0.1:8020/HTML5%2bCSS3%2bJavaScript 网 页 设计 实用 教程 /实例 /第 6 童 /c 


6-3 ”设置 文字 滚动 次 数 的 页 面 效果 
【实例 6.4】 设 置 文字 滩 动 的 速度 和 延 时 ， 文 件 名 称 为 chapter6.4.html， 


< LDOCTYEE html»> 
<html> 
<head> 
<meta charset="UTF—8"»> 
<title> 设 置 文字 深 动 的 速度 和 延 时 </title> 
</head> 
<body> 
<marduee> 默 认 的 文字 滚动 速度 和 延 时 </Vmaraquee> 
<marquee scrollamount="3"> 文 字 深 动 速度 为 3 像素 </marquee> 
<marquee scrollamount="5"> 文 字 深 动 速度 为 5 像素 </marquee> 
<marquee scrollamount="3" scrolldelay=30> 文 字 深 动 速度 为 3 像素 ， 滚 动 延 
时 为 30 毫秒 </marquee> 
<marquee scrollamount="3" scrolldelay=100> 文 字 深 动 速度 为 3 像素 ， 滚 动 延 
时 为 100 毫秒 </mardquee> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter6.4.html， 页 面 效 果 如 图 6-4 所 示 。 


容 如 下 : 
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个 = 口 x 


| C DD 127.00.1:8020/HTML5%2bCSsS$3%2bjJavaScript 网 而 设计 空 用 教程 /实例 /第 6 章 /chapte... 二 | : 


口 设 间 文字 订 动 的 速度 和 和 下 X WW 


走 认 的 文字 滚动 速度 和 延 时 
立 字 溢 动 速度 为 3 像素 
立 字 滚动 速度 为 5 像素 
驻 字 漆 动 速度 为 3 像素 ， 漆 动 延 时 为 30 量 种 
驻 字 滚动 速度 为 3 像 索 ， 滚 动 延 时 为 1003 


图 6-4 设置 文字 滚动 的 速度 和 延 时 的 页 面 效 果 


【实例 6.5】 设 置 文 学 深 动 沁 围 的 背景 闫 色 和 沁 围 ， 文 件 名 称 为 chapter6.5.html， 内 容 
如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 设 置 文字 滚动 范围 的 背景 闫 色 和 范围 </title> 


</head> 
<body> 
<marquee bgcolor="aqua"” width="200" height="50"> 文 字 滚 动 范围 
</margquee> 
</body> 
</html> 
在 浏 贤 右 中 打开 网 页 文件 chapter6.5.html， 页 面 效 果 如 图 6-5 所 示 。 


; , 加 -一 口 x 
六 设置 文字 渡 动 范围 的 背 技 x WW， 
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文字 漆 动 范围 


图 6-5 ”设置 文字 滚动 的 背景 颜色 和 范围 的 页 面 效果 
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6.3 设置 多 巡 体 


6.3.1 插入 音频 


audio 标记 是 HTML 标记 中 播放 音频 的 标记 。audio 标记 的 语法 格式 如 下 : 
<audio> 不 支持 audio 元 素 的 浏览 器 的 显示 文字 </audio> 
audio 标记 可 以 用 于 设置 音频 播放 的 多 个 属性 ， 内 容 包 括 开 始 播放 的 时 间 、 是 否 显示 播 
放 控 件 、 播 放 模 式 、 是 人 否 静 音 、 音 频 加 载 方式 和 音频 文件 的 URL。audio 标记 的 属性 如 
表 6-2 所 示 。 
表 6-2 audio 标记 的 属性 
属 性 描述 
i 该 属性 设置 音频 在 就 绪 后 马上 播放 
controls 该 属性 设置 问 用 户 显 示 播 放 控 件 


ioo 该 属性 设置 音频 循环 播放 
本 该 属性 设置 音频 输出 为 静音 

uto 2 RO yp 

| re 该 属性 表示 音频 在 页 面 加 载 时 进行 加 载 , 并 预备 播放 。 如 果 使 用 “autoplay”， 
preload metadata | 
则 忽略 该 属性 

ToTe 

该 属性 设置 要 播放 的 音频 文件 的 URL 


目前 ， 各 大 浏 虎 器 对 于 audio 标记 中 的 src 属性 可 以 使 用 的 音频 格式 文 持 不 一 ， 具 体内 
容 如 表 6-3 所 示 。 其 中 的 OGG Vorbis 格式 是 类 似 于 MP3 等 的 音乐 格式 ， 但 它 是 完全 免费 、 
开放 和 没有 专利 限制 的 。 


表 6-3 各 浏览 器 中 audio 标记 支持 的 音频 格式 


浏览 器 音频 格式 eee 


IE 9 及 以 上 不 支持 不 支持 
Chrome 6 及 以 上 文 持 文 持 文 持 
Firefox 3.6 及 以 上 支持 


不 支持 
支持 

【实例 6.6】 显 示 首 频 控 件 和 设置 首 频 文件 的 URL， 文 件 名 称 为 chapter6.6.html， 内 容 
如 下 : 


< DOCTYEE htmil> 
<html> 


Safari5 及 以 上 
Opera 10 及 以 上 
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<head> 
<meta charset="UTF-8"> 
<title> 播 放 音 频 </title> 
</head> 
<body> 
ne controls="controls”" src="image/dance .mp3"> 
您 的 浏览 器 不 支持 该 音频 文件 的 播放 ，。 
em 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter6.6.html， 页 面 效 果 如 图 6-6 所 示 ， 可 以 在 页 和 面 中 控制 
音频 的 播放 和 俘 止 ， 并 调整 音量 。 


后 口 人 
品 播放 音频 x Ws 
| C | D127.0.0.1:8020/HTML5%2bCSS3%2bJavascript 网 页 设计 实用 教程 /实例 /第 6 章 /chapte.. 普 | : 


Pp 000/004 B= 中 ) : 


图 6-6 ”在 浏览 絮 中 播放 音频 的 页 面 效 果 
【实例 6.7】 设 置 自动 循环 播放 音频 且 静 音 ， 文 件 名 称 为 chapter6.7.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 设 置 自动 循环 播放 音频 且 静 音 </title> 
</head> 
<body> 


<aud1io controls="controls™” src="image/dance .mp3" 
J loop=" Loop muted="muted"> 
您 的 浏览 器 不 支持 该 音频 文件 的 播放 。 
a 
</body> 
</html> 


nel etal ea chapter6.7.html,， 负面 效果 如 图 6-7 所 示 , 首 频 目 动 循 坏 播 放 ， 
且 为 静音 。 注 意 : 目前 ，Chrome 浏览 器 已 取消 了 上 自动 播放 音频 的 功能 ， 而 其 他 浏览 器 仍 可 
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以 自动 播放 。 


GCG | 避 127.0.0.1:80207HTML59%2bCS53%zbjJavascript 网 页 设计 详 用 教程 / 详 例 /第 6 章 /chapte.， 衣 | :; 


Pb 000/004 和 一 一 一 中: 


图 6-7 ”在 浏览 器 中 设置 自动 循环 播放 音频 且 静 音 的 页 面 效 果 


6.3.2 插入 视频 


video 标记 是 HTML 标记 中 播放 视频 的 标记 。video 标记 的 语法 格式 如 下 : 
<Video> 不 支持 video 元 素 的 浏览 器 的 显示 文字 </video> 
video 标记 可 以 用 于 设置 视频 播放 的 多 个 属性 ， 内 容 包 括 开 始 播放 的 时 间 、 是 否 显示 播 
放 控 件 、 视 频 播 放 上 亏 的 高 度 和 宽度 、 播 放 模式 、 视 频 加 载 方式 和 视频 文件 的 URL。video 标 
记 的 属性 如 表 6-4 所 示 。 
表 6-4 video 标记 的 属性 


属 性 描述 
i 该 属性 设置 视频 在 就 绪 后 马上 播放 
controls 该 属性 设置 器 用 户 显 示 播 放 控件 
width 该 属性 设置 视频 播放 器 的 宽度 
ei 该 属性 设置 视频 播放 器 的 高 度 
es 该 属性 设置 视频 循环 播放 
该 属性 表示 视频 在 页 面 加载 时 进行 加 载 , 并 预备 播放 ,如 果 使 用 “autoplay”， 
preload te 
NONe 则 忽略 该 属性 
本 该 属性 设置 要 播放 的 视频 文件 的 URL 


目前 ， 各 大 浏览 器 的 不 同 版 本 对 于 video 标记 中 的 sre 属性 可 以 使 用 的 视频 格式 支持 不 
一 ， 具 体内 容 如 表 6-5 所 示 。 
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表 6-5 各 浏览 器 中 video 标记 支持 的 视频 格式 


浏览 器 \ 视 频 格式 OGG 
IE9 及 以 上 不 支持 
Ginmis 帮 起 具 芋 支持 支持 
Firefox 3.6 及 以 上 文 持 
Safari 5 及 以 上 支持 不 支持 


【实例 6.8】 显 示 视 频 控件 和 设置 视频 文件 的 URL， 文 件 名 称 为 chapter6.8.html， 内 容 


如 下 : 
<IDOCTYPE htmil» 
<html> 
<head> 
<meta charset="UTF-—8"»> 
<title> 播 放 视 频 </title> 
</head> 
<body> 
<VlLdeo controls="controls™" src="image/waterfall.mp4"> 
您 的 浏览 器 不 支持 该 视频 文件 的 播放 。 
</video> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter6.8.html， 页 面 效 果 如 图 6-8 所 示 ， 可 以 在 页 面 中 控制 
视频 的 播放 和 停止 ， 并 调整 音量 。 


让 可 本 x 旺 [=| 这 加 中 


0:00/ 0:33 
各 和 一 


6-8 在 浏览 器 中 播放 视频 的 页 面 效果 


【实例 6.9】 设置 视频 的 宽度 和 高 度 并 目 动 循环 播放 ， 文 件 名 称 为 chapter6.9.html， 内 
容 如 下 : 
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<IDOCTYPE html> 


<html» 
<head> 
<meta charset="UTF-8"> 
<title> 设 牌 视频 的 宽度 和 高 度 并 上 自动 循环 播放 </title> 
</head> 
<body> 


<Vldeo controls="controls™ src="image/summer.mp4™" width="320" 
height="200™ autoplay="autoplay™" loop="loop"> 
您 的 浏览 器 不 文 持 该 视频 文件 的 播放 。 
</video> 
</body> 
</html> 


在 浏览 厚 中 打开 网 页 文件 chapter6.9.html， 页 面 效 果 如 图 6-9 所 示 ， 视 频 的 宽度 为 320 
像 系 ， 忆 上 度 为 200 像 系 ， 视 频 目 动 循环 播放 。 注 总 : 目前 ，Chrome 浏览 器 已 取消 了 目 动 播 
放 视 频 的 功能 ， 而 其 他 浏 贤 器 仍 可 以 目 动 播 放 ，。 


】 口 设置 视频 的 宽度 和 高 度 并 x WW \ 


他 | 加 127.0.0.1:8020/HTML53%62bC553%2bJavascript 网 页 设计 实用 教程 /实例 /第 6 曹 /chapterge... 


OU /0:33 
| = 


图 6-9 ”在 浏览 器 中 设置 视频 的 宽度 和 高 度 并 自动 循环 播放 的 页 面 效 果 
Sa， 6.4 回 到 工作 场景 


6.2~6.3 廊 介 绍 了 marquee 标记 、audio 标记 、video 标记 的 使 用 ， 和 擎 握 了 使 用 marquee 
标记 来 深 动 显示 文字 、 使 用 audio 标记 来 播放 音频 和 使 用 video 标记 来 播放 视频 的 方法 。 下 
面 回 到 前 面 介 绍 的 工作 场景 中 ， 完 成 工作 任务 。 

【工作 过 程 一 】 制 作 一 个 有 滚动 的 文字 和 图 片 的 网 页 一 一 《运动 中 的 动物 》。 网 页 具 
体内 容 如 下 : 第 一 行文 字 滚 动 速度 为 20; 第 二 行文 字 来 回 交 普 滚 动 ， 滚 动 速度 为 20; 第 三 
行文 字 来 回 交 丛 滚 动 , 滚动 速度 为 200; 第 四 行文 字 滚 动 一 次 即 停 止 。 网 页 中 还 有 四 张 图 卢 ， 
分 为 两 组 ， 第 一 组 的 两 张 图 片 分 别 目 右 同 左 和 目 左 同 右 深 动 ， 第 二 组 的 两 张 图 片 分 别 目 上 
回 下 和 目下 同上 滚动 。 工 作 过 程 一 的 页 面 效 果 如 图 6-10 所 示 。 
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CE [ 达 | 3 口 了 
上 这 i 六 字 实 出 x Wa 
人 | 二 127.0.0.1:8020W/HTML53%2bC553362bjavascript 网 而 砚 计 空 用 织 程 / 空 便 / 芝 6 襄 /chapter6.. 者 | | 下 
放 字 漆 动 速度 为 20 


区 字 来 加 次 花 漆 动 ,速度 为 20 
“ 字 来 回 交 背 滚 动 ， 宽度 为 2 
两 张 图 片 ， 分别 自 右 向 左 和 自 左 向 右 滚动 


图 6-10 《运动 中 的 动物 》 的 页 面 效果 
创建 网 页 ， 文 件 名 为 chapter6.10.html， 内 容 如 下 所 示 : 


<1DOCTYPE html> 
<html>»> 
<head> 
<meta charset="UTPTF—8"> 
<tit1le> 深 动 文 字 实例 </title> 
</head> 
<body> 
<marquee scrollamount="20"> 文 字 滚 动 速度 为 20</marquee> 
<marquee behavior="alternate"” scrollamount="20"> 文 字 来 回 交 蔡 深 动 ， 速 
度 为 20</marquee> 
<marquee behavior="alternate"” width="200"> 文 字 来 回 交 蔡 深 动 ， 宽 度 为 


200</margquee> 
<marquee behavior="slide"> 两 张 图片 , 分 别 目 右 同 左 和 上 自 左 回 右 滚动 </marduee> 
<marquee> 
<IMG width="100™ height="99"™ src="image/stork.gif"> 
</marquee> 


<marquee direction="right™" scrollamount="20"> 
<IMG width="100™ height="50"™" src="image/dog.9g1if"> 


</margquee> 
<margquee scrollamount="20"™ loop="3"> 两 张 图 片 ， 分 别 自 下 则 上 和 自 上 癌 下 深 
动 </mardueey> 


<margquee direction="up"> 
<IMG width="]100™" height="99"™ src="image/stork.g1if"> 
</margquee> 
<margquee direction="down" scrollamount="20"> 
<IMG width="100™ height="50™ src="image/dog.9gif"> 
</margquee> 
</body> 
</html> 


【工作 过 程 二 】 制 作 一 个 插入 可 播放 的 首 频 和 视频 的 网 页 一 一 《海滩 》。 工 作 过 程 二 
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的 页 面 效 果 如 图 6-11 所 示 。 


”是 音 颇 0 视频 实例 ~ WW 


GG | 127.0.0.1890207HTML5962bC553962bjavascript 了 网 页 设计 实用 教程 /实例 /第 6 章 /chapter6..， 售 | : 


0-00 / 015 : 
一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


pb 000/7:24 ®@ ") ! 


6-11 《海滩 》 的 页 面 效 果 
创建 网 页 ， 文 件 名 为 chapter6.11.html， 内 容 如 下 所 示 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset=" UTEF 8"> 
<title> 音 频 和 视频 实例 </title> 
<h1l align-"center"> 注 浴 </h1> 
<Vldeo src—"image/beach.mp4" controls—"controls™” width—"400" 
heiqght="200"></video> 
<ald1o src="image/beach.mp3" controls="controls" 
loop="loop"></audio></head> 
<body> 
</body> 
</html> 


AS 6.5 工作 实 训 营 


6.5.1 训练 实例 


1. 训练 内 容 


目 行 设计 一 个 页 面 ， 市 有 深 动 的 文字 ， 具 备 可 播放 的 首 频 和 视频 。 页 面 美观 ， 文 学 1 
动 效 果酒 盖 所 学 的 所 有 设置 选项 ， 并 与 首 频 和 视频 有 机 结合 地 服务 于 页 面 主题 。 


2. 训练 
> 测 握 设置 文学 深 动 显示 。 
> “ 竺 握 播放 音频 。 


洒 
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> “掌握 播放 视频 。 

3. 训练 过 程 

参照 6.4 节 中 的 操作 步 又 。 

4. 技术 要 操 

注意 网 页 上 使 用 的 音频 和 视频 文件 的 格式 。 


6.5.2 工作 实践 常见 问题 解析 


【第 见 问题 】 能 不 能 不 考虑 浏览 右 而 始终 能 够 成 功 播放 音频 ? 
【 答 】 目 前 ， 由 于 专利 权 和 特许 使 用 避 的 法 律 和 财务 问题 ， 各 大 浏览 露 均 不 能 文 持 全 
部 的 音频 格式 。 尽 管 如 此 ，HTML5 提供 了 一 个 解决 方案 ， 可 以 将 <source> 标 记 购 套 在 
<audio> 容 器 内 。 先 获取 同一 首 乐曲 的 三 种 类 型 的 音乐 文件 ， 并 将 这 些 音乐 文件 与 HIML5 
文件 放 和 在 同一 个 文件 严 内 。 网 页 源 文 件 中 ， 将 每 个 音乐 文件 名 放 在 单独 的 <source> 标 记 中 ， 
并 且 音 频 容器 中 的 所 有 源 标记 都 由 <audio></audio> 构成 ， 如 下 所 示 : 
<audio controls> 
<source STC= take you fly.0gg /> 
<source src=” take you fly.mp3” /> 


<source STC= take you fly.wav” /> 


</audio> 
这 样 ， 无 论 访问 者 使 用 什么 浏览 器 ， 它 都 将 自动 选择 所 读 取 的 第 一 个 文件 类 型 ， 并 揪 
放 首 乐 文件 。 


信 ，6.6 本章 小 结 


网 页 的 页 面 效 果 丰 宇多 彩 ， 往 往 是 通过 文字 滚动 和 图 片 、 音 频 、 动 男 、 视 频 等 来 实 
现 的 。 

marquee 标记 是 HIML 标记 中 滚动 显示 文字 的 标记 。 marquee 标记 可 以 用 于 设置 滚动 如 
示 文 字 的 多 个 属性 ， 内 容 包 后 滚 动 的 方 同 、 滚 动 的 方式 、 循 环 次 数 、 秘 动 速度 、 俘 顿时 间 、 
水 平 对 齐 和 夷 和 且 对 齐 ， 以 及 深 动 区 域 的 背景 色 、 宽 度 和 局 度 等 。 

audio 标记 是 HTML 标记 中 播放 音频 的 标记 。audio 标记 可 以 用 于 设置 音频 播放 的 多 个 
属性 ， 内 容 包 括 开 始 播 放 的 时 间 、 是 否 显 示 播 放 控件 、 播 放 模 式 、 是 侍 静 首 、 首 频 加 载 方 
式 和 音频 文件 的 URL。 

video 标记 是 HIML 标记 中 播放 视频 的 标记 。 video 标记 可 以 设置 视频 播放 的 多 个 属性 ， 
内 容 包括 开始 播放 的 时 间 、 是 人 否 旺 示 播 放 控件 、 视 频 播 放 器 的 局 度 和 宽度 、 播 放 模 式 、 视 
频 加 载 方式 和 视频 文件 的 URL。 
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2 6.7 习 题 


和 , 单项 选择 题 
1. _ marquee 标记 的 属性 behavior 用 于 设置 文字 的 深 动 方式 ， 取 值 为 (  )。 


A. alternate B. scroll C. slide D. 以 上 都 是 
2. ”在 网 页 中 最 为 常用 的 两 种 音频 格式 是 ( | 

A. JPEG 和 MPEG B. JPEG 和 PSD C. MPEG 和 MP3 DD. MP3 和 WAYV 
3. ”在 网 页 中 最 为 常用 的 两 种 视频 格式 是 ( )。 

A. MP4 和 MOV B. JPEG 和 MP4 C. MPEG 和 MP4  D. MP3 和 MP4 
二 、 填 空 题 


1. marquee 标记 设置 文学 深 动 方向 的 属性 是 , 
取 值 是 
认 值 是 
2. 在 追求 速度 为 先 的 网 页 设计 时 ， 可 以 多 用 ， 
在 追求 美观 为 先 的 网 页 设计 时 ， 可 以 多 用 

和 

二 、 探 作 题 

1. 创建 网 页 《滚动 》， 文 件 名 为 ex6.1.html， 页 面 效 果 如 图 6-12 所 示 。 其 中 ，“ 相 反 
方向 的 文字 滚动 ”两 侧 的 左右 箭头 分 别 向 左右 两 侧 滚动 ，“ZigZag Marquee” 在 表格 中 左右 
交替 滚动 ， 两 个 图 片 自 左 向 右 滚动 和 自 上 向 下 滚动 。 其 中 的 图 片 内容 可 以 自行 设置 。 


六 文字 10 四 H 声 击 < 全 看 
种 | 国 12 了 0.1.60207HTMLS3%62bC553 和 2bJavascript 网 页 设计 站 用 本 得 / 习 晤 /| 太 0 归 /ew6.1htmt? hbt=1531395076191 六 | 中 


相反 方向 的 文字 滚动 | 。 < 相反 方向 的 文字 滚动 > 


左 石 充 关 的 克 字 洲 动 | 去 右 亦 各 的 立 字 洪 动 


图 片 左 石 区 营 渡 动 | 


图 6-12 ”在 浏览 器 中 打开 文件 ex6.1.html 的 页 面 效果 
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2. 创建 网 页 《我 最 爱 的 .…… 》， 文 件 名 为 ex6.2html， 以 “我 最 爱 的 …… ”来 介绍 一 
个 事物 ， 配 以 简要 的 文字 、 音 频 和 视频 ， 某 个 页 面 效 果 如 图 6-13 所 示 。 其 中 的 文字 、 音 频 
和 视频 可 以 自行 设置 。 


如 = 口 人 


人 我 避 和 后 并 x 卫士 
它 | 加 127.0.0.1:8020/HTML5%2bC5539%2bjavaScript 网 页 设计 实用 教程/ 习 要 /第 6 曹 /ex6.2.html?_hbt=1531385119047 。 家 | : 


我 最 爱 的 早餐 


吃 咎 吃 早 餐 ， 吃 每 样 的 早餐 ， 都 体现 着 一 个 人 的 生活 志 度 。 
你 对 待 生活 是 什么 态度 ， 生 活 就 会 用 什么 普度 对 你 。 做 一 份 健康 早上 ， 坏 仅 对 身体 健康 糊 有 益处 ， 也 让 我 们 更 加 关注 自己 的 生活 。 
这 世上 ， 址 该 将 就 的 不 仅仅 是 爱情 ， 还 应 该 有 早餐 。 


可 
“ 多 ra 了 本 
ed 3 证 果 
1 全 
FT Ed - 
rq 二 
LL = 


村” 


0-00 7 (07 叫 必 
各 = 一 


bp 000/205 全 dD) : 


图 6-13 ”在 浏览 器 中 打开 文件 ex6.2.html 的 页 面 效果 


CSS 表单 属性 


CSS 概念 、 语 法 和 作用 国 CSS 常用 单位 
引入 样式 表 的 方法 国 ”选择 器 

选择 器 分 类 和 使 用 图 ”CSS 字体 属性 
CSS 文本 段落 属性 图 ”CSS 表格 属性 
CSS 列表 属性 图 CSS 图 片 属性 
CSS 背景 届 性 图 ”CSS 超 链接 属性 


掌握 样式 表 的 使 用 方法 。 

掌握 不 同类 别 的 选择 器 的 使 用 方法 。 
掌握 使 用 样式 表 来 设置 字体 属性 。 
掌握 使 用 样式 表 来 设置 文本 段落 属性 。 
掌握 使 用 样式 表 来 设置 表格 属性 。 
掌握 使 用 样式 表 来 设置 列表 属性 。 
掌握 使 用 样式 表 来 设置 图 片 属 性 。 
掌握 使 用 样式 表 来 设置 背景 属性 。 
掌握 使 用 样式 表 来 设置 超 链 接 属 性 。 
掌握 使 用 样式 表 来 设置 表单 属性 。 
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Sa 7.1 工作 场景 导入 


【工作 场景 

每 个 网 站 往往 需要 制作 多 个 网 页 ， 而 其 背景 、 布 局 、 字 体 等 的 设置 往往 类 似 或 相同 ， 
这 样 一 来 ， 每 个 网 页 都 需要 进行 重复 的 设置 。 如 果 需 要 网 站 的 背景 、 布 局 、 字 体 等 的 设置 
做 统一 调整 ， 那 么 工作 量 必然 是 极 大 的 。 能 不 能 采取 什么 方法 使 得 网 页 中 各 对 象 的 重复 设 
置 简捷 方便 而 易于 修改 ? 

下 面 需要 制作 网 页 《多 变 超 链 接 》《 带 水 平 导 航 栏 的 网 站 首页 》《 带 垂直 导航 栏 的 网 
站 首页 》《 带 完全 样式 的 横向 导航 栏 的 网 站 首页 》 和 《用 户 个 人 资料 》。 

【引导 问题 】 

(1) 什么 是 样式 表 ? 

(2) 样式 表 的 引入 方法 有 哪些 ? 

(3) 有 哪些 不 同类 别 的 选择 器 ? 如 何 使 用 ? 

(4) 怎样 使 用 样式 表 来 设置 字体 ? 

(5) 怎样 使 用 样式 表 来 设置 文本 段落 ? 

(6) 怎样 使 用 样式 表 来 设置 表格 ? 

(7) 怎样 使 用 样式 表 来 设置 列表 ? 

(8) 怎样 使 用 样式 表 来 设置 图 片 ? 

(9) 怎样 使 用 样式 表 来 设置 背景 ? 

(10) 怎样 使 用 样式 表 来 设置 超 链 接 ? 

(11) 怎样 使 用 样式 表 来 设置 表单 ? 


Sa% 7.2 css 简介 


7.2.1 什么 是 CSS 


HTML 文件 由 各 种 各 样 的 标记 组 成 ， 而 标记 中 丰富 多 彩 的 属性 及 其 设置 赋予 网 页 多 样 
的 外 观 和 功能 。 随 着 页 面 结构 日 益 复 杂 以 及 HIML 标准 的 增加 ，HTML 文件 越 来 越 长 ， 而 
其 中 的 标记 结构 和 设置 越 来 越 复 杂 ， 导 致 页 面 的 设计 、 制 作 和 维护 越 来 越 困 难 。 基 于 解决 
以 上 问题 的 缘由 ，1996 年 12 月 ，CSS 的 第 一 份 正式 标准 完成 ， 成 为 W3C 的 推荐 标准 。 目 
前 CSS 的 最 新 版 本 是 CSS3 。 

CSS 的 中 文 名 称 为 层 登 样式 表 或 级 联 样式 表 ， 更 文 全 称 为 Cascading Style Sheets。CSS 
是 一 种 定义 样式 结构 如 字体 、 颜 色 、 位 置 等 的 语言 ， 能 够 对 网 页 中 元 素 位 置 的 排版 进行 像 
系 级 精确 控制 ， 文 持 几 乎 所 有 的 字体 字号 样式 ， 拥 有 对 网 页 对 象 和 模型 样式 编辑 的 能 力 。 
CSS 不 仅 可 以 静态 地 修 钱 网 页 ， 还 可 以 配合 各 种 脚本 语言 动态 地 对 网 页 各 元 系 进 行 格式 化 。 
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CSS 样式 表 中 的 样式 规则 形成 一 个 层次 结构 ， 不 同 层次 的 样式 规则 的 优先 级 不 同 ， 因 
此 通过 样式 规则 的 层次 结构 来 设置 其 优先 级 的 顺序 ， 从 而 实现 级 联 效 末 。 


7.2.2 CSS 的 语法 


CSS 样式 表 中 包含 了 多 个 样式 规则 ， 这 些 样式 规则 是 可 应 用 于 网 页 中 元 素 的 格式 化 指 
令 。 每 个 样式 规则 由 选择 器 、 属 性 及 属性 值 组 成 ， 基 本 格式 如 下 : 
选择 器 {属性 : 值 } 


其 中 ,选择 右 是 需要 改变 样式 的 HTML 元 系 , 属性 是 选择 右 指 定 的 标记 所 包含 的 属性 ， 
值 是 属性 所 设置 的 值 。 

一 个 选择 器 可 以 同时 设置 一 至 多 条 样式 规则 ， 如 果 是 多 条 样式 规则 ， 那 么 规则 之 间 用 
分 号 分 隔 。CSS 中 也 可 以 写 注释 ， 注 释 以 “/*” 开 始 ， 以 “*/” 结 束 。 例 如 : 

hli{color:redt 

p{color:blue; text-allgn:center;} 

h2 

L 

color:blue; 

text-align:center; 

/* 下 面 是 字体 的 样式 */ 

font-family: "隶书 "; 

} 


7.2.3 CSS 的 作用 


CSS 为 HTML 提供 了 一 种 样式 描述 , 定义 了 其 中 元 素 的 显示 方式 。CSS 在 Web 设计 领 
域 是 一 个 突破 。 总 体 来 说 ，CSS 具有 以 下 特点 : 

> ”丰富 的 样式 规则 。CSS 提供 了 丰富 的 文档 样式 外 观 ， 以 及 设置 文本 和 背景 属性 的 
能 力 ， 能 够 对 网 页 中 元 素 位 置 的 排版 进行 像素 级 精确 控制 。 

> ”样式 之 间 可 层 登 。CSS 样式 规则 之 间 的 层级 关系 使 与 之 相关 联 的 HTML 元 素 的 属 
性 设置 更 灵活 和 方便 。 

> “样式 和 内 容 相 分 离 。 可 以 将 相同 样式 规则 的 元 素 进行 归 类 ， 使 用 同一 个 样式 规则 
进行 定义 ， 也 可 以 将 某 个 样式 规则 应 用 到 所 有 同名 的 HTML 标记 中 ， 或 是 将 一 个 
CSS 样式 规则 指定 到 菜 个 页 面 元 素 中 。 如 果 要 修改 样式 ， 只 需要 在 样式 列表 中 找 
到 相应 的 样式 规则 进行 修改 ， 这 对 于 网 站 中 具有 相同 风格 的 多 个 页 面 的 设计 、 制 
作 和 维护 有 着 极 大 的 便利 ， 可 大 大 提高 工作 效率 。 


7.2.4 CSS 的 常用 单位 


CSS 中 的 常用 单位 包括 长 度 单位 和 颜色 单位 ，CSS 样式 规则 中 的 长 度 设置 和 颜色 设置 
必须 以 此 来 描述 。 
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CSS 中 的 长 度 单位 如 表 7-1 所 示 。 其 中 的 ex 在 CSS 中 是 非常 有 用 的 单位 ， 因 为 可 以 自 
适应 各 种 字体 。 
表 7-1 CSS 中 的 长 度 单位 表 


单 位 
%0 
in 
CII 
TTIN 
em 当前 的 字体 尺寸 的 倍数 
ex 一 个 ex 是 一 个 字体 的 x-height(x-height 通常 是 字体 的 一 半 
)t 人 磅 (1pt 等 于 1/72 英寸 ) 
c 12 点 活字 (lpe 等 于 12 点 ) 
DX 像素 300px 


CSS 中 的 颜色 可 以 是 CSS 预定 义 颜色 、 十 六 进 制 颜 色 、RGB 颜色 、RGBA 颜色 、HSL 
颜色 和 HSLA 颜色 。 
CSS 预定 义 颜 色 共 147 种 ， 其 中 有 17 种 是 标准 色 ， 如 表 7-2 所 示 。 在 CSS 中 直接 使 用 
命名 郑 色 的 名 称 ， 就 可 以 设置 相应 的 颜色 。 


闫 


aqua 
black 
blue 
fuchsia 


maroon 
DaVY 
olive 
orange 
urple 
red 
sl]lver 
teal 
white 


ellow 


表 7-2 CSS 标准 色 数 值 对 照 表 


和 十 六 进 制 什 


水 绿 #OOFFFF 
黑色 #000000 
蓝 色 #0000FF 
紫红 色 #FFOOFF 
灰色 #808080 
绿色 #008000 
浅 绿 #00FF00 
栗色 #800000 
#000080 


#808000 


橙色 #FFAS00 
紫色 #800080 
红色 #FF0000 
银色 #COCOCO 
水 鸭 色 #008080 
白色 #FFFFFF 
黄色 #FFFF00 


RGB 值 
0. 255, 255 
0, 0,0 
0, 0, 255 
255 0 255 
128, 128, 128 
0, 128.0 
0, 255,0 
128, 0, 0 
0, 0, 128 
128, 128, 0 
255, 165,0 
128, 0, 128 
255, 0, 0 
192, 192, 192 
0, 128, 128 
5 25 二 2955 
255, 255, 0 
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十 六 进 制 颜色 的 基本 格式 为 梳 RGGBB， 其 中 RR 表示 红色 ，GG 表示 绿色 ，BB 表示 蓝 
色 。 十 六 进 制 颜色 值 是 由 红 、 绿 、 蓝 三 种 颜色 的 数值 组 合 而 成 ， 每 种 颜色 的 数值 最 小 为 00， 
最 大 为 FF。17 种 标准 色 的 十 六 进 制 颜色 值 如 表 7-2 所 示 。 

esti teeta ro G 表示 绿色 ，B 表示 蓝 色 。 
RGB 颜色 值 是 由 红 、 绿 、 蓝 三 种 颜色 的 数值 组 合 而 成 ， 每 种 颜色 的 取 值 范围 是 0 到 255。 
17 种 标准 色 的 RGB bed 7-2 所 示 。 

RGBA 颜色 是 在 RGB 颜色 值 之 上 添加 alpha 通道 ， 基 本 格式 为 RGB(R,G,B,alpha)， 其 
中 alpha 表示 对 象 透明 度 ， 信 在 0 到 1 之 间 ，0 表示 完全 透明 ，1 表示 完全 不 透明 。 

HSL 颜色 的 基本 格式 为 HSLUue,Saturation,Lightness)， 其 中 Hue 表示 色调 ，Saturation 
表示 饱和 度 ，Lightness 表示 亮度 。 色 调 是 色 轮 上 的 度数 ， 取 值 范围 是 0 到 360，0 表示 红色 ， 
120 表示 绿色 ，240 表示 蓝 色 。 饱 和 度 是 颜色 的 深浅 程度 ， 取 值 范围 是 0 到 100，0 表示 灰 
色 ，100 表示 全 彩色 。 亮 度 的 取 值 范围 是 0 到 100，0 表示 最 暗 ，100 表示 最 亮 。 

HSLA 颜色 是 在 HSL 颜色 值 之 上 添加 alpha 通道 ， 基 本 格式 为 HSL(Hue,Saturation,， 
Lightness,alpha)， 其 中 alpha 表示 对 象 透 明度 ， 值 在 0 到 1 之 间 ，0 表示 完全 透明 ，1 表示 完 
全 不 透明 。 


信 ，7.3 引入 样式 表 的 方法 


CSS 样式 表 保 存 了 多 个 样式 规则 ， 用 来 对 页 面 的 不 同 元 素 设 置 属性 ， 达 到 丰富 页 面 的 
效果 。 浏 览 器 读 入 样式 表 后 ， 会 根据 其 中 的 样式 规则 来 设置 HIML 页 面 中 的 元 素 。CSS 样 
et HTML 页 面 中 的 位 置 ， 分 为 内 联 样式 、 内 部 样式 表 和 外 部 样式 表 三 种 。 


7.3.1 ”内 联 样式 


内 联 样式 是 在 HIML 标记 里 面 下 接 使 用 样式 规则 ， 而 不 用 写 选 择 嚣 名称。 定义 内 联 样 
式 的 语法 格式 如 下 所 不 : 
< 标记 名 style=" 属 性 : 值 ;"></ 标 记名 > 


如 宁 同 时 设置 多 条 样式 规则 ， 那 么 规则 之 间 用 分 号 分 隔 。 
内 联 样式 将 HTML 元 素 的 属性 设置 和 内 容 放 在 一 起 ,导致 页 面 body 部 分 不 够 简洁 。 但 
是 如 果 页 面 中 菏 个 样式 规则 在 HTML 页 面 中 仅 使 用 一 次 ， 那 么 内 联 样 式 的 灵活 性 则 恰 到 好 
处 地 满足 使 用 要 求 。 
【实例 7.1】 内 联 样 式 的 使 用 ， 文 件 名 称 为 chapter7.1.html， 内 容 如 下 : 
<IDOCTYPE html» 
<htm]l> 
<head> 
<meta charset="UTF—8"™"»> 
<title> 内 联 样 式 的 使 用 </title> 
</head> 
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<body> 
<h1> 内 联 样式 的 使 用 </h1> 
<p> 这 一 段 没 有 使 用 样式 </p> 
<p style="color:red;margin: 20px; "> 这 一 段 使 用 了 内 联 样式 </p> 
<p> 这 一 段 没有 使 用 样式 </p> 
</body> 
</html> 


在 浏览 郁 中 打开 网 页 文件 chapter7.1.html， 页 面 效 果 如 图 7-1 所 示 。 三 个 段 洛 标 记 中 ， 
只 有 第 二 个 使 用 了 内 联 样 式 ， 设置 子 的 颜色 和 边 距 ,但 该 内 联 样 式 对 为 外 两 个 段落 标记 
没有 任何 作用 。 


口内 联 样式 的 使 用 x Wo 


Nm 
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内 联 样式 的 使 用 


这 一 段 没 有 使 用 样式 
这 一 段 使 用 了 内 联 样式 


这 一 段 没 有 使 用 样式 


7-1 内 联 样式 的 使 用 的 页 面 效 果 


7.3.2 内 部 样式 表 


内 部 样式 表 是 在 HTML 文件 的 head 部 分 里 面 散 入 style 标记 来 给 出 样式 规则 。 定 义 内 
部 样式 表 的 语法 格式 如 下 所 示 : 
<style> 样式 规则 名 {属性 : 值 ;} </style> 
内 部 样式 表 将 样式 规则 集中 到 HTML 文件 的 head 部 分 ,使 得 页 和 面 主体 部 分 简洁 。 如 球 
某 个 页 面 中 多 次 使 用 某 个 样式 规则 ， 那 么 可 以 在 该 HTML 文件 中 使 用 内 部 样式 表 。 
【实例 7.2】 内 部 样式 表 的 使 用 ， 文 件 名 称 为 chapter7.2.html， 内 容 如 下 : 


<IDOCTYPE htm]> 


<html> 
<head> 
<meta charset="UTF-—8"> 
<Sstyle> 
Pt 
color:red;margin: 20px; 
0 
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} 
</style> 
<title> 内 部 样式 表 的 使 用 </title> 
</head> 
<body> 
<h1> 内 部 样式 表 的 使 用 </h1> 
<p> 这 一 段 使 用 了 内 部 样式 表 < /p> 
<p> 这 一 段 使 用 了 内 部 样式 表 < /p> 
<p> 这 一 段 使 用 了 内 部 样式 表 < /p> 
</bhody> 
</html> 


在 浏览 右 中 打开 网 页 文件 chapter7.2.html， 页 面 效 果 如 图 7-2 所 示 。 该 内 部 样式 表 对 所 
有 的 段落 标 窒 均 及 生 了 影 啊 。 


1 口 网 和 二 志 多 大 月 x 人 
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内 部 样式 表 的 使 用 


这 一 段 使 用 了 内 部 样式 表 
这 一 段 使 用 了 内 部 样式 表 


这 一 段 便 用 了 内 部 样式 去 


7-2 内 部 样式 表 的 使 用 的 页 面 效果 


7.3.3 外 部 样式 表 


外 部 样式 表 是 在 HTML 文件 的 head 部 分 里 面 众 入 link 标记 来 给 出 存 有 样式 规则 的 外 部 
样式 表 文 件 ， 文 件 后 级 名 是 .css。 定 义 外 部 样式 表 文件 的 语法 格式 如 下 所 示 : 


<1ink rel="stylesheet"™ type="text/css" href=" 外 部 样式 表 文 件 名 "> 


外 部 样式 表 中 的 内 容 是 样式 规则 的 集合 ， 如 果 样式 规则 过 多 ， 在 使 用 内 部 样式 表 时 会 
导致 HTML 文件 长 度 过 长 ， 不 方便 编辑 。 在 页 面 中 存在 大 量 的 样式 规则 时 ， 可 以 将 其 存放 
在 外 部 样式 表 文 件 中 ， 再 对 HTML 文件 进行 编辑 ， 可 同时 打开 外 部 样式 表 文件 ， 样 式 和 内 
容 分 别 在 不 同 的 文件 中 ， 可 方便 编辑 操作 。 如 果 不 需要 修改 内 容 ， 只 需要 修改 相应 的 页 面 
元 素 外 观 ， 那 么 只 要 修改 外 部 样式 表 中 的 样式 规则 即 可 ， 不 需要 修改 HTML 文件 。 更 为 方 
便 的 是 ， 一 个 HTML 文件 中 可 以 使 用 多 个 外 部 样式 表 文件 ， 可 以 根据 样式 规则 的 内 容 对 其 
进行 分 类 ， 放 在 不 同 的 外 部 样式 表 文件 中 ， 方 便 管理 。 在 创建 外 部 样式 表 文 件 前 ， 通 常 在 
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网 页 所 在 文件 夹 中 创建 名 为 “css” 的 子 文件 来 ， 有 所 有 的 外 部 样式 表 文 件 都 保存 在 该 子 文件 
夹 内 。 
【实例 7.3】 外 部 样式 表 的 使 用 ， 文 件 名 称 为 chapter7.3.html， 文 件 内 容 如 下 : 


<IDOCTYPE htmil> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<link rel="stylesheet" type="text/css" href="css/chapter7.3.css" /> 
<title> 外 部 样式 表 的 使 用 </title> 
</head> 
<body> 
<h1> 外 部 样式 表 的 使 用 </h1> 
<p> 这 一 段 使 用 了 外 部 样式 表 </p> 
<p> 这 一 段 使 用 了 外 部 样式 表 </p> 
<p> 这 一 段 使 用 了 外 部 样式 表 < /p> 
</body> 
</html> 


外 部 样式 表 文 件 名 称 为 chapter7.3.css， 文 件 内 容 如 下 : 


hl 1 
colors Yead: 
} 
p { 
margin: 20px; 
} 
body I 
background: sienna; 


} 
在 浏览 器 中 打开 网 页 文件 chapter7.3.html， 页 面 效 果 如 图 7-3 所 示 。 外 部 样式 表 文 件 中 
分 别 有 三 个 样式 规则 ， 对 应 标签 body、hl 和 p， 相 应 网 页 文件 中 的 三 个 标签 均 受 到 影响 。 


/ % 入 口 所 
站 外 部 棕 未 表 的 使 用 只 We 


| D127.0.0.1:30207HTML5%2bC$$3%2bjJavascript 网 页 设计 实用 教程 / 裕 例 /第 7 训 /chapteri.3.html? hbt=1531385372.， 训 | ; 


7-3 外 部 样式 表 的 使 用 的 页 面 效果 
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AS 7.4 选择 器 


CSS 样式 表 中 设置 了 多 个 样式 规则 ， 根 据 其 对 于 HIML 页 面 中 元 素 的 影响 范围 ， 将 选 
择 器 分 为 id 选择 器 、 类 选择 器 、 标 记 选 择 器 、 全 局 选择 器 、 和 群 组 选择 器 、 后 代 选 择 右 和 伪 
类 选择 器 等 类 别 。 

7.4.1 id 选择 器 

id 选择 器 可 以 为 标 有 特定 id 值 的 HTML 元 素 指 定 特定 的 样式 。 定 义 id 选择 器 的 语法 
格式 如 下 所 示 : 

#id 选择 器 名 {属性 : 值 ;] 

使 用 id 选择 器 的 语法 格式 如 下 所 示 : 

< 标签 名 id="id 选择 器 名 ">...</ 标 签名 > 

使 用 id 选择 器 后 ， 该 HIML 元 素 将 会 受到 相应 的 id 选择 器 中 样式 规则 的 影响 。 

HTML 页 面 中 的 每 个 元 素 的 id 值 通 常 是 独一无二 的 ， 这 是 为 了 在 编制 相应 的 程序 时 可 
以 自由 控制 HTML 页 面 上 的 每 个 元 素 。 如 果 两 个 元 素 的 id 值 相同 ， 在 编制 HIML 页 面 时 


不 会 出 现 问 题 ， 但 这 不 是 一 个 民 好 的 编程 习 懂 ， 因 此 应 尽量 保证 各 元 又 id 值 互 不 相同 。 
【实例 7.4】id 选择 器 的 使 用 ， 文 件 名 称 为 chapter7.4.html， 内 容 如 下 : 


<1IDOCTYPE htmil> 


<html> 
<head> 
<meta charseto—"UTF—8"»> 
<Sstyle> 
#1id1 I 
color: red; 
} 
非 1G2 1 
color: Feen: 
} 
</style> 
<title>id 选择 器 的 使 用 </title> 
</head> 
<body> 
<h1>id 选择 器 的 使 用 </h1> 
< Td-"idl"> 这 里 脆 dq 十 1dis </p> 
<p ld=" id2"> 这 里 的 id 十 id2。</Pp> 
< dg1n> 区 里 的 1 是 1d91。<Apm 
< id="id3"> 巡 里 胸 i1d 有 十 id3。</p> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter7.4.html， 页 面 效 果 如 图 7-4 所 示 。 四 个 段落 标签 中 ， 
第 一 个 和 第 三 个 的 id 值 都 是 id1， 因 此 使 用 了 id 选择 器 idl 的 样式 规则 ， 第 二 个 的 id 值 是 
142， 因 此 使 用 了 id 选择 器 id2 的 样式 规则 ， 第 四 个 因为 id 选择 器 id3 不 存在 ， 因 此 使 用 的 


是 默认 设置 。 
re BS 一 ODO Xx 
7 六 id 选择 器 的 使 用 x Wn 


GQ | @ 127.0.0.1:8020/HTML5%2bCSS3962bJavascript 网 页 设计 实用 教程 /实现 /第 7 章 /chapter7.4html?_hbt=1531385411.. 从 | : 


id 选择 器 的 使 用 


这 里 的 加 是 id1 
这 里 的 id 是 iqd2 
这 里 的 id 是 id1。 


这 里 的 id 是 id3， 


7-4 id 选择 器 的 使 用 的 页 面 效果 


7.4.2 ”类 选择 器 


类 选择 器 可 以 为 标 有 特定 class 值 的 HTML 元 素 指定 样式 规则 。 定 义 类 选择 器 的 语法 
格式 如 下 所 示 : 

.类 选择 器 名 {属性 : 值 ; } 

使 用 类 选择 器 的 语法 格式 如 下 所 示 : 

< 标签 名 class=" 类 选择 器 名 ">..</ 标 签名 > 

使 用 类 选择 器 后 ， 该 HIML 元 素 将 会 受到 相应 的 类 选择 器 中 样式 规则 的 影响 。 

类 选择 器 可 以 为 具有 相同 属性 特征 的 一 类 HTML 元 素 指 定 样式 规则 。 在 使 用 时 ， 只 要 
将 该 类 HTML 元 素 的 class 值 设置 为 类 选择 器 名 称 即 可 。 类 选择 器 中 的 样式 规则 可 以 作用 于 
不 同类 别 的 HTML 元 素 。 

【实例 7.5】 类 选择 器 的 使 用 ， 文 件 名 称 为 chapter7.5.html， 内 容 如 下 : 


<1IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<Sstyle> 


Classl { 
color: red; 


可 第 7 章 CSS 介绍 


text-align: center; 
} 
-Class2z I 
Color: green; 
text—align: right; 
} 
</style> 
<tit1le> 类 选择 器 的 使 用 </title> 
</head> 
<body> 
<hl class="classl"> 类 选择 器 的 使 用 </h1> 
二 
< Ciased "cla992"1 里 古 记 1a352s /BS 
<p> 这 里 没有 class。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.5.html， 页 面 效 果 如 图 7-5 所 示 。 四 个 标记 中 ， 标 题 
标记 和 第 一 个 段落 标记 的 class 值 都 是 class1， 因 此 使 用 了 类 选择 器 classl 的 样式 规则 ， 第 
二 个 段落 标记 的 class 值 是 class2， 因 此 使 用 了 类 选择 右 class2 的 样式 规则 ， 第 四 个 标记 因 
为 类 选择 右 class3 不 存在 ， 因 此 使 用 的 是 默认 设置 。 


CE 全 一 口 其 
中 美 选 择 吴 的 使 用 x 有 四 


CG 加 1270.0.1:380207HTMIL5%ap6ss3abJavwascripit 网 页 设计 实用 禾 程 / 空 例 区?7 齐 Ahnapter7r.5jhtml7 hbt=1531365442...， 闪 | : 


类 选择 器 的 使 用 


这 里 是 class1。 


这 里 是 class2。 


这 里 洛 有 上 lass。 


7-5 ”类 选择 器 的 使 用 的 页 面 效 果 


7.4.3 ”标记 选择 玄 
标记 选择 器 ， 也 称 为 元 素 选择 器 ， 可 以 为 现 有 的 HIML 标记 指定 样式 规则 。 定 义 标记 
选择 器 的 语法 格式 如 下 所 示 : 
标记 选择 器 名 {属性 : 值 ; } 
使 用 标记 选择 器 的 语法 格式 如 下 : 
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< 标记 名 >.</ 标 记名 > 

使 用 标记 选择 器 后 ， 几 使 用 该 HIML 标记 的 元 系 将 会 受到 相应 的 标记 选择 器 中 样式 规 
则 的 影 啊 。 

标记 选择 器 可 以 为 整个 页 面 中 的 特定 标记 指定 样式 规则 。 

【实例 7.6】 标 记 选 择 器 的 使 用 ， 文 件 名 称 为 chapter7.6.html， 内 容 如 下 : 


<1DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<Sstyle> 
p ({ 
Color: red; 
text-align: center; 
} 
</style> 
<title> 标 记 选 择 器 的 使 用 </title> 
</head> 
<body> 


<h1> 标 记 选 择 器 的 使 用 </h1> 
<p> 这 里 是 pp 标记 。</p> 
<p> 这 里 也 是 P 标记 。</p> 
这 里 没有 PP 标记 。 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.6.html， 页 面 效 果 如 图 7-6 所 示 。 除 标题 外 ， 前 两 行 
文字 使 用 了 段落 标记 ， 因 此 都 使 用 了 标记 选择 器 p 的 样式 规则 ， 第 三 行文 字 没 有 使 用 段落 
标记 ， 因 此 和 前 两 行文 字 明 显 外 观 不 同 。 


- 口 XX 
] 卓 标 ib 选 泽 器 的 使 用 x 由 于 
已 a 127.0.0.1:8020/ 第 7 章 /chapter7.6.html? hbt=1553241426981 六 四 : 
Te 
慰 记 选择 器 的 使 用 
这 里 是 Pp 标记 ， 
这 里 也 是 p 标 记 。 
这 里 没有 pp 标记 。 


7-6 ”标记 选择 器 的 使 用 的 页 面 效 果 
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7.4.4 ”全 局 选择 器 


全 局 选择 右 ， 也 称 为 通 配 选 择 器 ， 可 以 为 页 面 中 所 有 的 HIML 元 系 指 定 样式 规则 。 定 
义 全 局 选择 器 的 语法 格式 如 下 所 示 : 
*{ 属 性 : 值 ;} 
定义 标记 选择 占 后 ,该 页 面 中 所 有 的 HTML 元 素 将 会 受到 全 局 选择 器 中 样式 规则 的 影响 。 
如 果 需 要 对 页 面 中 所 有 的 HIML 元 素 指定 相同 的 样式 规则 , 那么 可 以 定义 全 局 选择 右 。 
【实例 7.7】 全 局 选择 器 的 使 用 ， 文 件 名 称 为 chapter7.7.html， 内 容 如 下 : 


<lIDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF—8"»> 
二 号 上 YE> 
wk 
color: reds 
text-align: center; 
} 
</style> 
<title> 全 局 选择 器 的 使 用 </title> 
</head> 
<body> 


<h1> 这 里 是 标记 h1。</h1l1> 
<h2> 这 里 是 标记 h2。</h2> 
<p> 这 里 是 段落 标记 p。</p> 


这 里 没有 标记 。 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.7.html， 负 和 面 效 果 如 图 7-7 所 示 。 所 有 的 HTML 元 系 
都 使 用 了 全 局 选择 器 的 样式 规则 。 


品 ” 土 同 选 树 器 的 使用 二 


中 127.0.0.1:8020/ 第 7 总 /chapter7.7.html? hbt=1553241591117 广 加; 


这 里 是 标记 h1。 
这 里 是 标记 h2。 


这 里 是 段落 标记 p。 
这 里 设 有 标记 . 


7-7 ”全 局 选择 器 的 使 用 的 页 面 效果 
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7.4.5 ”和 群 组 选择 器 


群 组 选择 句 可 以 为 页 面 中 多 个 id 选择 硕 、 类 选择 器 或 标记 选择 右 同 时 指定 相同 内 容 的 
样式 规则 。 定 义 群 组 选择 占 的 语法 格式 如 下 所 示 : 
选择 器 名 1 ,选择 器 名 2，,...{ 属 性 : 值 ; } 


定义 群 组 选择 器 后 , 该 群 组 选择 器 名 称 中 的 各 个 选择 器 在 使 用 时 , 页 和 面 中 相关 的 HIML 
元 系 将 会 党 到 群 组 选择 需 中 样式 规则 的 影 啊 。 

使 用 群 组 选择 器， 将 会 大 大 地 简化 CSS 代 僻 。 如 果 多 个 选择 器 具有 相同 属性 ， 可 以 将 
其 合并 为 群 组 选择 器 , 定义 同样 的 CSS 属性 , 这 可 大 大 地 提高 编 但 效率 , 同时 也 可 减少 CSS 
文件 的 体积 。 

【实例 7.8】 和 群 组 选择 器 的 使 用 ， 文 件 名 称 为 chapter7.8.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<Style> 
#1d1， 
-Classi. 
pi 
Color: red; 
text-align: center; 
} 
</style> 
<tit1le> 群 组 选择 器 的 使 用 </tit1e> 
</head> 
<body> 
<h1> 群 组 选择 器 的 使 用 </h1> 
<h2 id="idl"> 这 里 使 用 了 群 组 选择 器 中 的 id 选择 器 。</h2> 
<h2> 这 里 什么 都 没有 用 。</h2> 
<h2 class="classl"> 这 里 使 用 了 和 群 组 选择 器 中 的 类 选择 器 。</h2> 
<h2> 这 里 什么 都 没有 用 。</h2> 
<p> 这 里 使 用 了 群 组 选择 器 中 的 标记 选择 器。< /p> 
这 里 什么 都 没有 用 。 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.8.html， 页 面 效 果 如 图 7-8 所 示 。 可 以 看 到 使 用 了 id 
选择 器 、 类 选择 器 和 标记 选择 器 的 三 个 HIML 元 素 都 使 用 了 和 群 组 选择 器 的 样式 规则 。 


于 第 7 章 CSS 介绍 


CO 127.0.0.1:8020/ 第 7 章 /chapter7.8&.html? hbt=1553241638557 立 四 : 


群 组 选择 器 的 使 用 
这 里 使 用 了 群 组 选择 器 中 的 id 选择 器 . 


襄 ” 泰 组 选 泽 老 的 使 用 x 十 


这 里 什么 都 没有 用 。 
这 里 使 用 了 群 组 选择 器 中 的 类 选择 器 ， 
这 里 什么 都 没有 用 。 
这 里 使 用 了 群 纪 选择 圳 中 的 标记 选择 露 。 
这 里 什么 都 没有 用 ， 
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7.4.6 后 代 选 择 痢 


后 代 选 择 右 也 称 为 包含 选择 器 ， 用 来 选择 特定 元 系 或 元 系 组 的 后 代 ， 将 对 父 元 系 的 选 
择 器 放 在 前 面 ， 对 子 元 素 的 选择 器 放 在 后 面 ， 中 间 加 一 个 空格 分 开 。 定 义 后 代 选 择 堪 的 语 
法 格式 如 下 : 

父 选择 器 名 子 选 择 器 名 ..….{ 属 性 : 值 ;} 

后 代 选 择 器 中 的 元 系 个 数 不 限 于 两 个 ， 对 于 多 层 祖 先后 代 关 系 ， 只 要 对 祖先 元 系 的 选 
择 在 后 代 元 系 之 前 ， 中 间 以 空格 分 开 即 可 。 

【实例 7.9】 后 代 选 择 右 的 使 用 ， 文 件 名 称 为 chapter7.9.html， 内 容 如 下 : 


<IDOCTYPE htmil> 


<html> 
<head> 
<meta charset="UTF-—8"> 
<Stylie> 


#1dl1 span { 
CoOLor: reds 
font—-size: 20px; 

} 

siassl Span | 
color: greens 
font—-size: 24px; 


} 
P Span { 
color: blue; 
font—-size: 30px; 
} 
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</style> 
<title> 后 代 选 择 器 的 使 用 </title> 
</head> 
<body> 
<h1> 后 代 选 择 器 的 使 用 </h1> 
<p> 这 里 什么 都 没有 用 。</p> 
<p id="idl"> 这 里 <span> 新 内 容 </span> 使 用 了 后 代 选 择 器 。< /p> 
<p class="classl"> 这 里 <span3> 新 内 容 </span> 使 用 了 后 代 选 择 器 。< /p> 
<p> 这 里 <span> 新 内 容 </span> 使 用 了 后 代 选 择 器 。< /p> 
<p> 这 里 什么 都 没有 用 。< /p> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter7.9.html， 页 面 效 果 如 图 7-9 所 示 ， 可 以 看 到 三 个 段落 
标记 中 的 span 标记 分 别 使 用 了 三 个 不 同 的 样式 规则 。 
[& 一 口 站 


六 后 代 选 树 器 的 使 用 x 


[ee a 127.00.1:8020/HTMLS3%2bCS$3%2bjJavascript 网 页 证 计 守 用 过 各 / 立 倒 / 第 7 襄 /chapter7.9.html? hbt=1531385580... 家 | 


后 代 选 择 器 的 使 用 
这 里 什么 都 没 有用， 
这 里 新 内 容 使 用 了 后 代 选 择 吕 ， 


这 里 新 内 容 和 更 用 了 后 代 选 泽 器 。 


这 时 着 和 内 容 证 了 后 代 选择 中 
这 里 什么 都 没有 用 . 


7-9 ”后 代 选 择 器 的 使 用 的 页 面 效 果 


7.4.7 ” 仿 类 选择 钴 


伪 类 选择 器 用 来 添加 选择 器 的 一 些 特殊 效果 ， 例 如 HTML 元 素 在 不 同 状态 下 使 用 不 同 
的 样式 。 伪 类 选择 万 中 使 用 最 多 的 是 链接 的 伪 关 选择 器 。 页 面 中 链接 的 状态 共有 四 种 : 未 
访问 链接 (link)、 已 访问 链接 (visited)、 鼠 标 指针 芒 集 在 链接 上 和 面 (hover)、 活动 链接 (active)。 
定义 链接 伪 类 选择 器 的 语法 格式 如 下 : 

a:link{ 属 性 : 值 ;} 

a:visited{ 属 性 : 值 ;] 

a:hover{ 属 性 : 值 ;} 

a:active{ 属 性 : 值 ;} 

链接 伪 类 选择 器 在 书写 时 ， 请 按照 ljnk、visited、hover、active 的 顺序 来 写 ， 奋 则 可 外 
出 现 选 择 器 无 效 的 现象 ， 但 四 个 状态 可 根据 需要 来 写 ， 不 一 定 要 全 部 写 出 来 。 


iy 
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【实例 7.10】 链 接 伪 类 选择 器 的 使 用 ， 文 件 名 称 为 chapter7.10.html， 内 容 如 下 : 


<1IDOCTYPE html>»> 


<html> 
<head> 
<meta charset="UTF-8"»> 
<Sil yle> 
a link 1 
Color: red; 
} 
a:visited 1 
COlor: green;s 
} 
a:hover { 
CoOlor: blue; 
} 
ET 4 
color: black:; 
} 
</style> 
<tit1le> 链 接 伪 类 选择 器 的 使 用 </title> 
</head> 
<body> 
<a href=#> 链 接 伪 类 选择 器 的 使 用 </a> 
</body> 
</html> 


在 浏览 妖 中 打开 网 页 文件 chapter7.10.html， 页 面 效果 如 图 7-10 所 示 ， 可 以 看 到 链接 在 
四 种 状态 下 分 别 呈 现 四 种 不 同 的 颜色 。 


© - 0O x 
7 证 x 


| GG | DD 12700.1:3020yHTML5%2bCSs$3%2bjavascripi 网 而 设 计 实 用 救 程 /实例 /第 7 草 /chapterif.10html? hbt=153138561... 让 | : 


Ee 


图 7-10 ”使 用 链接 伪 类 选择 器 的 页 面 效 果 
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7.4.8 选择 怖 优先 级 


假如 同时 有 两 个 选择 器 给 同一 个 元 素 设置 相同 的 属性 ， 那 么 最 终 设置 为 哪个 呢 ? 如果 
遇 到 以 上 情况 ， 那 么 按照 以 下 规则 来 处 理 。 
> ”优先 级 顺序 ， 内 联 样式 > id 选择 器 > 类 选择 器 > 标记 选择 器 ”> 全 局 选择 器 


> ”如果 使 用 相同 优先 级 的 两 个 选择 占 先 后 为 同一 个 元 素 的 同一 个 属性 设置 样式 规 


则 ， 那 么 前 一 个 起 作用 。 
【实例 7.11】 选 择 占 优先 级 的 使 用 ， 文 件 名 称 为 chapter7.11.html， 内 容 如 下 : 


<IDOCTYPE htmil> 


<htm]> 
<head> 
<meta charseto—"UTF 8"> 
<Sstyle> 
#1d1 { 
Color: red; 
} 
#1d2 I{ 
coblor:s drays 
} 
-Classl f 
Color: green; 
} 
p { 
coLlLor: blues 
} 
i. 
coOLlor: oranges 
} 
</style> 
<title> 选 择 器 优先 级 的 使 用 </title> 
</head> 
<body> 
这 里 使 用 了 全 局 选择 器 。 


<p> 这 里 使 用 了 标记 选择 器 。</P> 
<p class="classl1"> 这 里 添加 了 类 选择 器 。</p> 
<p id="idl” class-="class1l1"> 巡 里 添加 了 ia 选择 器 。</p> 
<p stvyle="color-:black;:" id="idil™ class-="classl1"> 这 里 添加 本 内 联 样式 。 
<jp> 
<p id="idl"” id="id2"> 这 里 使 用 了 两 个 id 选择 器 。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.11.html， 页 面 效果 如 图 7-11 所 示 ， 可 以 看 到 第 五 行 


的 段落 标记 中 的 文字 显示 为 内 联 梓 陈规 则 ， 最 后 一 行 的 段落 标记 中 的 文字 显示 为 第 一 个 id 


选择 占 的 样式 规则 。 
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了 口 远 汉 器 央 先 级 的 使 用 。 x WW 


,Ss 


富国 127.00.1:8020/HTML5%2bC553962bjJavascript 网 页 设计 空 用 教程 / 空 全 / 芭 7 剖 /chapter7.11.html? hbt=1531385565,.， 诅 | : 


这 里 使 用 了 标记 选择 器 . 
这 里 添加 了 i 出 先 择 器 。 
这 里 添加 了 内 联 样式 。 
这 里 便 用 了 两 个 i 而 先 择 强 。 


图 7-11 使 用 选择 器 优先 级 的 页 面 效 果 
sa 7.5 设置 字体 
CSS 字体 属性 定义 字体 类 型 、 大 小 、 风 格 和 颜色 。 


7.5.1 字体 类 型 


font-family 属性 用 来 设置 文本 的 字体 系列 。font-family 属性 的 语法 格式 如 下 : 
{font-family: 字 体 名 称 ;]} 


在 CSS 中 ,除了 各 种 特定 的 字体 系列 外 ,可 以 使 用 的 通用 字体 系列 包括 Senf 字体 (Times 
New Roman、Georgia)、Sans-serif 字体 (Arial、Verdana)、Monospace 字体 (Courier New、 Lucida 
Console)、Cursive 字体 和 Fantasay 字体 。 

字体 名 称 如 果 超 过 一 个 字 ， 则 必须 在 字体 名 称 前 后 使 用 引号 。 建 议 font-family 属性 设 
置 多 个 字体 名 称 ， 这 样 使 得 如 果 浏 贤 器 不 文 持 第 一 种 字体 时 可 以 由 其 他 字体 来 瞪 代 ， 多 个 
字体 名 称 之 间 用 逗号 分 隔 。 

【实例 7.12]】 设置 文本 字体 ， 文 件 名 称 为 chapter7.12.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 置 文本 字体 </title> 
“styvyley> 
p.serif { 
font—-family: "Times New Roman™", Times, serif; 
} 
p.sansserif { 


font-family: Arial, Helvetica, sans—-serif; 
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} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 字体 </h1> 
<p class="serif"> 这 一 段 的 字体 是 Times New Roman 。</p> 
<p class-"sansserif"> 这 一 段 的 字体 是 Arial 。 </p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.12.html， 页 面 效果 如 图 7-12 所 示 ， 可 以 看 到 两 段 广 
字 分 别 使 用 了 不 同 的 字体 。 


| yy 加 如 吾 立志 字体 EE 三 ， 
于 


ER 
ee | 加 127.0.0,1:802D/HTML5%2bC5539%82bJawascript 网 页 设计 空 用 过 权 / 空 刚 / 第 ?7 宣 /dhaptery.12.htm ? hbt=153138569.,., 入 | : 


设置 文本 字体 
这 一 段 的 字 性 是 Times New Roman 。 


这 一 段 的 字体 明 Arial 。 


图 7-12 设置 文本 字体 的 页 面 效果 


7.5.2 字体 大 小 


font-size 属性 用 来 设置 文本 的 大 小 。 文 本 的 大 小 可 以 使 用 绝对 值 (像素 值 )， 或 是 相对 什 
(em 值 或 白 分 比 )。em 值 是 当前 字体 大 小 的 倍数 ，lemp 和 当前 的 字体 大 小 相等 ， 在 浏览 
中 默认 的 文字 大 小 是 16px。 百 分 比 是 当前 字体 大 小 的 百分比 值 。 文 本 的 大 小 还 可 以 使 用 表 

表 7-3 font-size 值 列表 


值 摘 述 


XX-SImall 

X-SImall 

small 

ee 把 字体 的 尺寸 设置 为 不 同 的 尺寸 ， 从 xx-small 到 xx-large。 默 认 值 : medium 
large 

x-large 


XX-large 
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值 朱 “” 述 
smaller 把 font-size 设置 为 比 父 元 素 更 小 的 尺寸 
larger 把 font-size 设置 为 比 父 元 素 更 大 的 尺寸 
length 把 font-size 设置 为 一 个 固定 的 值 
% 把 font-size 设置 为 基于 父 元 素 的 一 个 百分比 值 
inherit 从 父 元 素 继承 


在 设置 文本 的 大 小 之 前 ， 先 确定 文本 的 类 型 ， 是 标题 还 是 普通 的 文字 段落 ， 从 而 确定 
使 用 标题 标记 <h1> 一 <h6> 还 是 使 用 段落 标记 <p>。 
【实例 7.13】 设 置 文本 大 小 ， 文 件 名 称 为 chapter7.13.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf 8"»> 
<title> 设 置 文本 大 小 </title> 
<style> 
#1G1 并 
font-size: x-small; 
} 
#1G2 1 
font-size: medium; 
} 
#1G3 了 
font—-size: x-large; 
} 
#1d4 { 
font-: smaller; 
} 
- 
font-size: larger; 
} 
#1id6 { 
font—-size: 24px; 
} 
F107 
font—-size: 1.5em; 
} 
#4id8 f 
font—-size: 70%; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 大 小 </h1> 
<p> 这 一 段 文 本 大 小 未 设置 。< /p> 
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<p id="idl"> 这 一 段 的 文本 大 小 是 x-small。</p> 
<p 19"id2"™> 这 一 段 的 文本 大 小 是 medium。</p3 
< Id="193™> 这 一 段 的 文本 大 小 是 wlarge。 </B3 
<p id="id4"> 这 一 段 的 文本 大 小 是 smaller。</p> 
<p id="id5"> 这 一 段 的 文本 大 小 是 larger。</p> 
<p id="id6"> 这 一 段 的 文本 大 小 是 24px。</p> 
<p mdT7T> 这 一 段 的 广 本 天 小 是 Tems < 加 > 
<p avi08> 这 一 段 的 又 本 大 小 是 17085 </p> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter7.13.html， 页 面 效 果 如 图 7-13 所 示 ， 可 以 看 到 文字 大 
小 不 同 的 效果 。 
© - 0O x 


EE En 127.00.1:8020/HTML5%2bC5$3%2bJavascript 网 页 设计 宇 用 救 程 / 空 例 /第 7 章 /dhapter?.13.html? _hbt=153138573... 让 | 


疫 置 文本 大 小 


这 一 段 广 本 大 小 未 设 理 。 
这 一 段 的 六 本 大 小 是 x-small。 


这 一 段 的 妇 本 太 小 是 medium， 


这 一 段 的 文本 大 小 是 x-large。 
这 一 段 的 立 本 大 小 旺 smaller， 


这 一 段 的 六 本 大 小 是 larger。 
这 一 段 的 文本 大 小 是 24Px。 
这 一 段 的 文本 大 小 是 1em。 


这 一 息 的 立 本 大 小 是 7046。 


图 7-13 设置 文本 大 小 的 页 面 效果 


YS 3 字体 凡 档 


font-style 属性 用 来 设置 文本 的 风格 o font-style 属性 可 以 使 用 表 7_4 中 的 值 来 描述 
表 7-4 font-style 值 列 表 


描述 
normal 默认 值 。 浏 览 器 显示 标准 字体 样式 
italic 浏览 右 显 示 射 体 字 体 样式 
oblique 浏览 器 显示 倾斜 字体 样式 
inherit 从 父 元 素 继 承 


【实例 7.14】 设 置 文本 风格 ， 文 件 名 称 为 chapter7.14.html， 内 容 如 下 : 


<1DOCTYEE html» 
<html> 
<head> 
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<meta charset="utf-—-8"»> 


<fLitl1e> 设 置 文本 风 祝 </titLe> 


<styie> 
#1d1 1{ 
font—style: normal; 
} 
#1d2 I{ 
font-style:italic; 
} 
#1093 4 
font-style: oblique; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 风格 </h1> 


<p> 这 一 段 文本 风格 未 设置 。</p> 
<p id="iqdl"> 这 一 段 的 文本 风格 是 normal。</p> 
<p i9-"igq2"> 这 一 段 的 文本 风格 是 italic。</p> 
<p id="id3"> 这 一 段 的 文本 风格 是 oblique。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.14.html， 页 面 效 果 如 图 7-14 所 示 ， 可 以 看 到 文本 风 
格 不 同 的 效果 。 


2 [= = 图 这 
4 口 讼 下 立 本 风格 x 


bh 


fa | 加 127.0.0.1:3020JHTML5%2bC553%2bjJavascript 网 页 设计 实用 教程 /实例 /第 ?7 章 /chapter?.14html? hbt=153138577... 查 | : 


设置 文本 风格 


这 一 段 文本 风格 未 设置 。 

这 一 段 的 文本 风格 是 normal。 
长 一 绒 委 区 下 厅 芒 呈 / 妇 /1 
下 一 总 入 区 起 司 芒 呈 pp1guwe， 


图 7-14 设置 文本 风格 的 页 面 效果 


7.5.4 字体 颜色 


color 属性 用 来 设置 文本 的 颜色 。color 属性 可 以 使 用 表 7-5 中 的 值 类 型 来 摘 述 。 
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表 7-5 color 值 类 型 列表 


值 
color name 颜色 值 为 颜色 名 称 
hex number 颜色 值 为 十 六 进 制 值 的 颜色 
reb number 颜色 值 为 RGB 代码 的 颜色 
inherit 从 父 元 素 继承 


【实例 7.15] 设 


<IDOCTYPE html>» 


<html> 
<head> 
<meta Charset= ut 一 8 > 
<title> 设 置 文本 颜色 </title> 
“alyle> 
body I{ 
CoOLGr:s CVyans 
} 
Pp 1 
Color: #808080; 
} 
P span { 
Solors ab {222m @ Ds 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 颜色 </h1> 
<p> 这 一 段 文本 <span> 新 内 容 </span>。</p> 
</body> 
</html> 


各 文本 颜色 ， 文 件 名 称 为 chapter7.15.html， 


在 浏览 器 中 打开 网 页 文件 chapter7.15.html， 页 面 效果 如 图 7-15 所 示 ， 可 以 看 到 文字 颜 


色 不 同 的 效果 。 
六 口 让 色 "We 


名 | 四 127.00.1:3020JHTML5%2bC5$3%2bjavascript 网 页 设计 空 用 教 径 / 空 例 /第 7 襄 /chapter7.15.html? 


图 7-15 设置 文本 颜色 的 页 面 效果 
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文本 段落 


CSS 文本 上 段 洛 属 性 定义 自行 缩 进 、 对 齐 方式 、 文 本 修饰 、 行 品 、 字 间距 、 词 间距 和 其 
他 段 沙 格 陈 。 


7.6.1 直行 缩 进 


text-indent 属性 用 来 设置 文本 块 中 首 行 文本 的 缩 进 。text-indent 属性 可 以 使 用 表 7-6 中 


的 值 来 描述 。 
表 7-6 text-indent 值 列 表 
值 摘 ，” 述 
leneth 首 行 缩 进 值 设 置 为 一 个 固定 的 值 ， 默 认 值 为 0 
0 首 行 缩 进 值 设 置 为 基于 父 元 素 的 一 个 百分比 值 
inherit 从 父 元 素 继 承 


【实例 7.16】 设 置 文本 段落 放行 缩 进 ， 文 件 名称 为 chapter7.16.html， 内 容 如 下 : 


<1DOCTIYPE html>» 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 置 文本 段落 首 行 缩 进 </title> 
<Sstyle> 
#1G1 4 
text—-indent: 10px; 
} 
#1d2 { 
text-indent: 15%; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 段落 首 行 缩 进 </h1> 
<p> 这 一 段 文本 段落 首 行 缩 进 未 设置 。</p> 
<p id="idl"> 这 一 段 的 文本 段落 首 行 缩 进 是 10px。</p> 
<p id="id2"> 这 一 段 的 文本 段落 首 行 缩 进 是 15%。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.16.html， 页 面 效 果 如 图 7-16 所 示 ， 可 以 看 到 文字 分 
别 使 用 了 不 同 的 缩 进 值 。 
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全 一 口 XX 


FP 癌 设置 交 本 般 涪 首 行 缩 进 x WW 
GG | 127.0.0.1:8020/HTML5%62bCSS3%2bJavaScript 网 页 设计 实用 教程 / 实 从/ 第 7 章 /chapter7.16.html? hbt=1531385844... 衣 | : 


设置 文本 段落 首 行 缩 进 
这 一 段 广 本 段落 首 行 缩 进 未 设置 。 
这 一 段 的 文本 段落 首 行 缩 进 是 10px。 
这 一 段 的 文本 段落 首 行 缩 进 是 1596。 


图 7-16 设置 文本 段落 首 行 缩 进 的 页 面 效果 


62 医 水平 对 齐 


text-align 属性 用 来 设置 元 和 际 文 本 的 水 平 对 齐 方 式 。textrallign 属性 可 以 使 用 表 7-7 中 的 
值 来 描述 。 


表 7-7 text-align 值 列表 


值 摘 “ 述 
left 设置 文本 靠 左 对 齐 ， 默 认 值 
right 设置 文本 靠 右 对 齐 
center 设置 文本 居中 对 齐 
justifi 设置 文本 两 端 对 齐 
inherit 从 父 元 素 继 承 


【实例 7.17】 设 置 文本 水 平 对 齐 方式 ， 文 件 名 称 为 chapter7.17.html， 内 容 如 下 : 


<IDOCTYPE Phtml> 
<html> 
<head> 
<meta charset="utf--8"> 
<title> 设 置 文本 水 平 对齐 方 式 </title> 
<Sstyle> 
#1d1 1{ 
text-al1gn: left; 
} 
#1d2 { 
text—align: right; 


第 7 章 CSS 介绍 


考 工 侣 3 于 
text-algn: centers 
} 
1d 4 
text-align: Justify; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 水 平 对 齐 方式 </h1> 
<p> 这 一 段 文 本 水 平 对 齐 方 式 未 设置 。</p> 
<p EdT> 这 一 般 区 本 水平 对 齐 方 式 足 16fE。<76> 
<p 了” iTd2n> 这 一 段 区 本 水 平 对 齐 方 式 是 三 gphte </BS 
<p id=" id3”> 这 一 段 文 本 水 平 对 齐 方 式 是 centers </p> 
<p id="id4"> 这 一 段 文本 水 平 对 齐 方式 是 justify。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.17.html， 页 面 效 果 如 图 7-17 所 示 ， 可 以 看 到 文字 分 
别 使 用 了 不 同 的 水 平 对 齐 方 式 。 


六 设置 立 本 水 平 对 齐 方式 x “ 十 


心 名 127.0.0.1:8020/ 第 7 章 /chapter7.17.html? hbt=1553241720166 


设置 文本 水 平 对 齐 方 式 
这 一 段 文本 水 平 对 齐 方 式 未 设置 。 
这 一 段 文本 水 平 对 齐 方式 是 |eft。 


这 一 段 文本 水 平 对 齐 方 式 是 right。 


这 一 段 文 本 水 平 对 齐 方式 是 center， 
这 一 段 文本 水 平 对 齐 方式 是 justify。 


图 7-17 设置 文本 水 平 对 齐 方 式 的 页 面 效 果 


7.6.3 垂直 对 齐 


vertical-align 属性 用 来 设置 元 系 文 本 的 垩 直 对 齐 方式 ,即行 内 元 系 的 基线 相对 于 该 元 系 
所 在 行 的 基线 的 垂直 对 齐 。vertical-align 属性 可 以 使 用 表 7-8 中 的 值 来 摘 述 。 
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表 7-8 ”vertical-align 值 列 表 


值 摘 _ 述 
baseline 设置 元 素 放 在 父 元 素 的 基线 上 ， 默 认 值 
sub 设置 元 素 垂直 对 齐 文 本 的 下 标 
super 设置 元 素 垂直 对 齐 文 本 的 上 标 
top 设置 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 设置 元 素 的 顶端 与 父 元 素 的 顶端 对 齐 
middle 设置 元 系 放 兽 在 父 元 素 的 中 部 
bottom 设置 元 率 的 顶端 与 行 中 最 低 的 元 率 的 顶端 对 齐 
text-bottom 设置 元 素 的 底 端 与 父 元 素 的 底 端 对 齐 
length 设置 元 素 对 齐 的 像素 值 
% 设置 元 素 使 用 line-height 属性 的 百分比 值 来 排列 元 素 ， 人 允许 负 值 ， 负 值 使 得 元 素 降 低 
inherit 从 父 元 素 继 承 


【实例 7.18】 设置 文本 垂直 对 章 方式 ， 文 件 名 称 为 chapter7.18.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-—8"> 
<Sstyle> 
p14 
font-size: 32px; 
} 
Di 
font—size: 20px; 
} 
#1d1 { 
vertical-align: baseline; 
} 
#1d2 f{ 
vertical-align: sub; 
} 
#103 1 
vertical-align: super; 
} 
#1id4 { 
vertical lg Lor 
} 
#1d5 并 
vertical~align: text=tops 
} 
#1d6 1{ 
vertical-align: middle; 
} 
#1id7 { 
vertical-align: bottom; 
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} 
#1d8 { 
vertical-align: text—-bottom; 
} 
#1d9 { 
vertical-align: 20px; 
} 
#1d10 1 
vertical-align: 20px; 
} 
#4id1ll 1 
vertical-align: 20%; 
} 
#1d12 { 
vertical-align: 20%;» 
} 
</style> 
<tit1le> 设 置 文本 垂直 对 齐 方式 </tit1Le> 
</head> 
<body> 


<p> 这 一 段 文 本 蛋 直 对 章 方式 是 <b id=-nmidl”>baseline。<yb> 这 一 段 文 本 牌 直 对 齐 方 
式 是 <b id="id2">sub。</b></p> 

<p> 这 一 段 文本 垂直 对 齐 方 式 是 <b 1d="id3">super。</b> 这 一 段 文本 垂直 对 齐 方式 是 
<b 1d="id4">top。 </b></p> 

<p> 这 一 段 文 本 垂直 对 齐 方式 是 <b idq="id5">text-top。</b> 这 一 段 文本 垂直 对 齐 方 
式 是 <b id="id6">middle。</b></p> 

<p> 这 一 段 文 本 年 直 对 齐 方式 是 <b id="id7">bottom。</b> 这 一 段 文本 生 直 对 齐 方式 
是 <b id="id8">text-_bottom: </b></p> 

<p> 这 一 段 文 本 垂直 对 齐 方式 是 <b id="id9">20px。</b> 这 一 段 文 本 垂直 对 齐 方式 是 
<b 1d="1d10">-20px。 </b></p> 

<p> 这 一 段 文本 垂直 对 齐 方式 是 <b id="id11">20%。</b> 这 一 段 文本 垂直 对 齐 方 式 是 
<b Tid 11 2 > 200%, </Ab><pS 

</body> 

</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.18.html， 页 面 效果 如 图 7-18 所 示 ， 可 以 看 到 文字 分 
别 使 用 了 不 同 的 垂直 对 齐 方式 。 


FD Re 方式。 x 


,1 


© [加 12700.T8020HTMLS362bCS53962bJavaScript 网 页 设计 裤 用 下 各 / 宝 例 /着 7 划 /chapter7.18uhtmli_hbt=1531383753896 六 | 1 
这 一 段 文本 垂直 对 齐 方式 是 baseline. 这 一 段 文本 垂直 对 齐 方式 是 
这 一 段 文本 垂直 对 齐 方式 是 %pPe" 这 一 段 文 本 垂直 对 齐 方式 是 ”P 
这 一 段 文 本 垂直 对 齐 方式 是 P* 这 一 段 文本 垂直 对 齐 方式 是 middle. 
这 一 段 文 本 垂直 对 齐 方式 是 botom. 这 一 段 文 本 垂直 对 齐 方式 是 text-bottom. 
这 一 段 文本 垂直 对 齐 方式 是 “这 一 段 文本 垂直 对 齐 方式 是 ”” 
这 一 段 文 本 垂直 对 齐 方式 是 20%. 这 一 段 文 本 垂直 对 齐 方 式 是 .20%、 


[xf 


图 7-18 设置 文本 垂直 对 齐 方式 的 页 面 效 果 
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7.6.4 文本 修饰 


text-decoration 属性 用 来 设置 语 加 到 文本 的 修饰 。text-decoration 属性 可 以 使 用 表 7-9 中 


的 值 来 手 述 。 
表 7-9 text-decoration 值 列表 
值 描 述 
none 设置 标准 文本 ， 默 认 值 
underline 设置 文本 下 划 线 
overline 设置 文本 上 划 线 
line-througl 设置 文本 删除 线 
blink 设置 文本 闪烁 (目前 仅 Firefox 支持 ) 
Inherlt 从 父 元 素 继承 


【实例 7.19】 设置 文本 修饰 ， 文 件 名 称 为 chapter7.19.html， 内 容 如 下 : 


<IDOCTYPE html»> 
<html> 
<head> 
<meta charset="utf-8"»> 
<title> 设 置 文本 修饰 </title> 
“stvVLieS 
#1d1 1 
text—-decoration: none; 
} 
#1id2 1{ 
text-decoration: underline; 
} 
#103 
text-decoration: overline; 
} 
#1d4 1{ 
text-decoration: line-through; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文 本 修饰 </h1> 
<p id="iqd1l"> 这 一 段 文本 修饰 是 none。</p> 
<p id="id2"> 这 一 段 文本 修饰 是 underline。</p> 
<P id="id3"> 这 一 段 文本 修饰 是 overline。</p> 


<p id="id4"> 这 一 段 文 本 修饰 是 1ine-through。</p> 


</body> 
</html> 


在 浏 贤 右 中 打开 网 页 文件 chapter7.19.html， 页 面 效 果 如 图 7-19 所 示 ， 可 以 看 到 文字 分 


别 使 用 了 不 同 的 修饰 。 


六 设置 文本 习作 “WW 
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名 | 包 12750.0180a07HTIMIL5 允 2b 纪 SS399abjJavascript 网 页 设计 实用 教程 / 实 屋 /第 /7 章 /Cha 


识 置 文本 修饰 


这 一 段 立 本 修饰 是 none。 
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图 7-19 设置 文本 修饰 的 页 面 效果 


7.6.5 ”人行 高 


line-height 属性 用 来 设置 文本 的 行 高 。line-height 属性 可 以 使 用 表 7-10 中 的 值 来 描述 。 
表 7-10 line-height 值 列表 


值 述 
normal 设置 合理 的 行 高 ， 默 认 值 
number 设置 数值 ， 该 数值 与 当前 字体 尺寸 相 乘 得 到 行 高 
leneth 设置 行 高 为 像素 值 
% 设置 行 高 为 当前 字体 尺寸 的 百分比 
inherit 从 父 元 素 继承 


【实例 7.20】 设置 文本 行 高 ， 文 件 名 称 为 chapter7.20.html， 内 容 如 下 : 


<IDOCEFEYPEE htmi> 
<html> 
<head> 
<meta charset="utf-8"»> 
<title> 设 置 文本 行 高 </title> 


<style> 
#1d1 f{ 
line-height: normal; 
} 
#1d2 { 
line~height: 2; 
} 
大工 口子 4 
line-height: 20px; 
} 
#1d4 { 
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line-height: 50%; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 行 高 </h1> 
<p id="id1l"> 这 一 段 文本 行 高 是 normal。</p> 
<p id="idl"> 这 一 段 文 本 行 高 也 是 normal。</p> 
<p id="id2"> 这 一 段 文本 行 高 是 2。</p> 
<p id="iqd2"> 这 一 段 文 本 行 高 也 是 2。</p> 
<p Td="id3"> 这 一 段 廊 本 行 峻 是 20px。</BS》> 
<P id="id3"> 这 一 段 文 本 行 高 也 是 20px。</p> 
< GE"iaagan> 这 一 自 文 本 行 高 是 50 站 。 过 /> 
<p Ed 这 一 自 葡 本 行 喜 人 忆 是 .50 轩 。 过 76> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.20.html， 页 面 效 果 如 图 7-20 所 示 ， 可 以 看 到 文字 分 
别 设置 了 不 同 的 行 高 。 


、 a 
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设置 文本 行 高 


这 一 般 立 本 行 高 是 normal。 


这 一 让 立 本 行 高 也 是 normal. 
这 一 自立 本 行 局 是 2 . 

这 一 段 丸 本 行 高 也 是 2。 

这 一 自信 本 行 高 是 20px。 

这 一 段 文 本 行 高 也 是 20px。 


这 一 段 文本 行 高 是 50%， 
这 一 自立 本 行 高 也 是 5058。 


图 7-20 设置 文本 行 高 的 页 面 效 果 


7.6.6” 字 则 距 


letter-spacing 属性 用 来 设置 文本 的 字 则 忠 。letter-spacing 属性 可 以 使 用 表 7-11 中 的 值 
来 描述 。 
表 7-11 letter-spacing 值 列表 
值 摘 述 
normal 设置 字符 间 没 有 额外 的 空间 ， 默 认 值 
length 设置 字 间 距 像素 值 
inherit 从 父 元 素 继 承 
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【实例 7.21】 设置 文本 字 间 距 ， 文 件 名 称 为 chapter7.21.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset—"utf—8"»> 
<title> 设 置 文本 字 间 距 </title> 
<Sstyle> 
#1id1 1{ 
letter-spacing: normal; 
} 
#1d2 { 
letter-spacing: 20px; 
} 
</style> 
</head> 
<body> 
<h1> 设 置 文本 字 间 距 </h1> 
<p id="idl"> 这 一 段 文本 字 间 距 是 normal。</p> 
<p id="id2"> 这 一 段 文本 字 间 距 是 20px。</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.21.html， 页 面 效 果 如 图 7-21 所 示 ， 可 以 看 到 文字 分 
别 使 用 了 不 同 的 字 间 距 。 


RAT 全 一 口 YX 
) 口 设 吾 广 本 闻 间 是 x 
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设置 文本 字 间 距 
这 一 段 交 本 字 间 距 是 normal， 
这 一 汤 训 本 定 间距 :是 这 0pXx。 


图 7-21 设置 文本 字 则 距 的 页 面 效果 


7.6.7 词 间 距 


word-spacing 属性 用 来 设置 单词 间 的 间距 。word-spacing 属性 可 以 使 用 表 7-12 中 的 值 来 
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表 7-12 word-spacing 值 列表 


值 摘 述 
normal 设置 单词 间 的 标准 空间 ， 默 认 值 
length 设置 单词 间 的 间距 像素 值 
inherit 从 父 元 系 继 承 


【实例 7.22]】 设置 文本 词 间距 ， 文 件 名 称 为 chapter7.22.html， 内 容 如 下 : 


<IDOCTYPE htmil> 


<html> 
<head> 
<meta charset="utf-—8"»> 
<title> 设 置 文本 词 间距 </title> 
“stvyieS 
#1id1 1{ 
word-spacing: normal; 
} 
#1d2 { 
word-spacing: 20px; 
} 
</style> 
</head> 
<body> 
<h1l> 设 置 文 本 词 间距 </h1> 
<p id="id1l"> 这 一 段 文本 词 间 距 是 normal。</p> 
<p 1d="idl">The space of this centence 1is normal .</p> 
<p id="id2"> 这 一 段 文本 词 回 跑 征 20px。</p> 
<p 1d="1d2">The space of this centence 15 20px.</p> 
</body> 
</html> 


在 浏 贤 占 中 打开 网 页 文件 chapter7.22.html， 页 面 效果 如 图 7-22 所 示 ， 可 以 看 到 词 则 距 
差异 对 于 中 文 语句 显示 无 影响 ， 而 对 于 英文 语句 显示 则 有 影 啊 。 


7 上 口 设 晤 六 本 词 向 距 “WN 
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设置 文本 词 间距 


这 一 自立 本 词 间距 呈 normal。 


The space of this centence is normal. 
这 一 段 立 本 词 间距 是 20px。 


The space of ths centence 1 20px 


图 7-22 设置 文本 词 间 距 的 页 面 效 果 
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表格 


< 7.7 设 和 


CSS 表格 样式 定义 的 范围 可 以 是 整个 表格 ， 也 可 以 是 表格 的 标题 ， 或 是 表格 的 一 行 或 
一 格 ， 定 义 的 内 容 包 括 表 格 边 杠 、 折 又 边框 、 表 格 宽度 、 表 格 高 度 、 表 格 文字 水 平 对 齐 、 
表格 文字 垂直 对 齐 、 表 格 填充 、 表 格 文字 颜色 和 表格 背景 颜色 。 

border 属性 用 来 设置 表格 边框 的 线 客 、 线 型 和 闫 色 ; width 属性 用 来 设置 表格 宽度 :height 
属性 用 来 设置 表格 高 度 ; text-align 属性 用 来 设置 表格 文字 水 平 对 齐 ; vertical-aligh 属性 用 来 
设置 表格 文字 垂直 对 齐 ; padding 属性 用 来 设置 表格 文字 和 边框 之 则 的 距离 ，color 属性 用 来 
设置 表格 文字 颜色 ; background-color 属性 用 来 设置 表格 背景 颜色 。 


border-collapse 属性 用 来 设置 表格 的 边框 是 售 被 合并 成 一 个 单一 的 边框 ， 还 是 像 在 标准 
的 HTML 中 那样 分 开 显 示 。border-collapse 属性 值 可 以 使 用 表 7-13 中 的 值 来 摘 述 。 
表 7-13 border-collapse 属性 值 列表 
值 描 述 
collapse 边框 合并 为 一 个 单一 的 边框 
separate 默认 值 ， 边 框 会 被 分 开 
inherit 从 父 元 素 继 承 


【实例 7.23】 设 置 表格 样式 ， 文 件 名 称 为 chapter7.23.html， 内 容 如 下 : 


IDOCTYPE 了 tm > 
<html> 
<head> 
<meta charset="utf-8"»> 
<title> 表 格 样 式 </title> 
<sStyle> 
#customers 1 
font-family: 打 体 ， 隶 书 ,，Arial, Helvetica, sans-serif; 
width: 100%; 
border-—collapse: collapse; 


} 
td { 
font—-size: lem; 
border: px sol19d #98bf2]1.; 
padding: 3px 7PX 2px Tpx; 
} 
th 1 


font-size: 1.1em; 
text—align: left; 
padding-—top: Spx; 
padding-bottom: 4px; 
background—color: #A7C942; 
coLors #5£ 二 于 二 二 二; 
text-align: center; 
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} 

= 了 
color: #000000; 
background-color: #EAF2D3; 

} 

</style> 
</head> 
<body> 
<table 1d-—"customers™> 

<tr> 
<th> 书 名 </th> 
<th> 出 版 社 </th> 
<th> 价 格 (元 ) </th> 

过 下 七 入 > 

<tr> 
<td> 红 星 照 炮 中 国 </tqd> 
<td> 人 民 文 学 出 版 社 </td> 
<td>33.00</td> 

<y 七 工 > 

<tr class="alt™»> 
<td> 云 边 有 个 小 卖 部 </td> 
<td> 湖 南 文艺 出 版 社 </td> 
<td>42 .00</tdqd> 

<{tr> 

<tr> 
<td> 活 着 </td> 
<td> 作 家 出 版 社 </td> 
<td>28.00</td> 

< 七 工 > 

<tr class="alt™"> 
<td> 月 亮 与 六 便士 </td> 
<td> 新 江 文 艺 出 版 社 </td> 
<td>39.80</td> 

</tr> 

< 
<td> 追 风筝 的 人 </td> 
<td> 上 海 人 民 出 版 社 </td> 
<td>36.00</td> 

<itr> 

“tr Class=" "alt 
<td> 从 动物 到 上 和 融 </td> 
<td> 中 信和 出 版 社 </td> 
<td>68.00</td> 

</tr> 

<Ttr> 
<td> 兴 非 的 世界 </tqd> 
<td> 作 家 出 版 社 </td> 
<td>38.00</td> 

</tr> 

过 有 和 
<td> 上 自在 独行 </td> 
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<td> 长 江 文 艺 出 版 社 </tqd> 
<td>39.00</td> 

< 

<tr> 
<td> 新 概念 英语 1: 英语 初 阶 </td> 
<td> 外 语 教学 与 研究 出 版 社 </td> 
<td>38.00</tid> 

</tr> 

<ir Class="AaAlt"»> 
<td> 新 概念 英语 2， 实践 与 进步 </td> 
<td> 外 语 教 学 与 研究 出 版 社 </td> 
<td>38 .00</td> 

<y 七 工 > 

</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.23.html， 页 面 效果 如 图 7-23 所 示 。 


六 和 要 属 样 奈 x 十 
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红星 照耀 中 国 人 民 文 学 出 版 社 | 33. 00 
云 边 有 个 小 卖 部 湖南 文艺 出 版 社 
活着 作家 出 版 社 
月 亮 与 六 便士 | 浙江 文艺 出 版 社 
上 海 人 民 出 版 社 


追 风 等 的 人 | 
从 动物 到 上 帝 中 信 出 版 社 
_ 苏 菲 的 世界 作家 出 版 社 
自在 独行 长 江 文 艺 出 版 社 

新 概念 英语 1， 英 语 初 阶 外 语 教学 与 研究 出 版 社 
新 概念 英语 2， 实 践 与 进步 外 语 教学 与 研究 出 版 社 


图 7-23 设置 表格 样式 的 页 面 效果 


Sa 7.8 设置 列表 


HTML 中 有 两 种 列表 ， 列 表 符 号 为 图 形 的 列表 是 无 序列 表 ， 列 表 符 号 为 数字 或 字母 的 
列表 是 有 序列 表 。 


7.8.1 列表 和 从 号 


list-style-type 属性 用 来 设置 列表 符号 的 类 型 。list-style-type 属性 可 以 使 用 表 7-14 中 的 
值 来 描述 。 
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none 
dsc 

circle 
square 
decimal 
lower-alpha 
upper-alpha 
lower-roman 


UPPEeI-TOINAnN 


【实例 7.24】 设 置 列表 符号 


表 7-14 ”list-style-type 属性 的 常用 值 
描述 

设置 无 列表 符号 

设置 列表 符号 是 实心 圆 。 默 认 值 

设置 列表 符号 是 空心 贺 

设置 列表 符号 是 实心 方块 

设置 列表 符号 是 数字 

设置 列表 符号 是 小 写 英 文字 母 

设置 列表 符号 是 大 与 英文 字母 

设置 列表 符号 是 小 写 罗马 数字 

设置 列表 符号 是 大 写 罗 马 数 字 


<TDOCTYPE html>» 


<html»> 
<head> 
<meta charset="utf-8"»> 
<title> 设 站 列表 付 守 </title> 
<Style> 
| 
1ist-style-type: none; 
} 
-Db 1 
11ist-style-type: circle;s 
} 
ss 
11st-style-type: disc; 
} 
-dd { 
1ist-style-type: square; 
} 
3 = 
1ist-style-type: decimal; 
} 
</style> 
</head> 
<body> 
<UT class="a"> 
Li erlis 
< 有 | Class="D"> 
<11i> 拍 照 手 机 </1i> 
<1i> 音 乐 手机 </11i> 
<1i> 游 戏 手机 </1i> 
</ul> 
<1i> 运 营 商 </1i> 
< 和 二 二 本 届 二 “人 
102 --------- 


， 文 件 名 称 为 chapter7.24.html， 内 容 如 下 : 
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<1i> 中 国电 信 </1i> 
<1i> 中 国 移动 </1i> 
<1i> 中 国联 通 </1i> 
</ul> 
<1i> 数 人 码 </1i> 
< ciass ="d"> 
<1i> 报 影 摄像 </1i> 
<1i> 影 音 娱 乐 </1i> 
<11i> 关 能 设备 </1i> 
</ul> 
</ul> 
<Ol class="a"y 
<113 守 elis 
<Ol Class="e"™y> 
<1i> 卧 室 家 有 具 </1i> 
<1i> 客 厅 家 具 </1i> 
<1i> 书 房 家 具 </1i> 
</AO1> 
二 店家 抽 </ 谤 
<11> 家 装 </1L1> 
</ol> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.24.html， 页 面 效 果 如 图 7-24 所 示 ， 可 以 看 到 列表 符 
号 不 同 的 效果 。 


六 设置 列表 符号 x 十 
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手机 
o 拍照 手机 
o 音乐 于 机 
a 游戏 手机 
运营 商 
s 中 国电 信 
s 中 国 移动 
。 中国 联通 
数码 
a 报 影 摄像 
a 影音 娱乐 
a 智能 设备 


宗 具 
1. 卧 罕 家 贞 
2. 客厅 家 具 
3. 书房 家 具 

家 居 

家 委 


图 7-24 设置 列表 符号 的 页 面 效 果 


7.8.2 图像 从 号 


设置 list-style-image 属性 ， 可 以 使 用 图 像 从 写 来 蔡 换 列表 符号 。list-style-image 属性 可 
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以 使 用 表 7-15 中 的 值 来 描述 。 


表 7-15 list-style-image 属性 的 值 
什 描 述 
URL 设置 图 像 文 件 的 路 径 
inherit 从 父 元 素 继承 。 


【实例 7.25】 设 首 图 像 符 号， 


<1DOCTYPE html» 
<html> 
<head> 
<meta charset="utf-8"> 


< 七 i 廿 1e> 设 置 图 像 符 号 < /titlLe> 


“StyLe> 
= 1{ 


1ist-style--limage: 


} 
-b 1 


1ist-style-limage: 


} 
</style> 
</head> 
<body> 
之 人 > 
<1i> 手 机 </1i> 
<uUul class="b"»> 
<1i> 拍 照 手 机 </1i> 
<1i> 音 乐 手机 </1i> 
<11> 游 戏 手机 </1i> 
</ul> 
<1i> 数 码 </1i> 
“Hl Class="D"> 
<11i> 摄 影 摄像 </1i> 
<1i> 影 音 娱 乐 </1i> 
<1i> 短 能 设备 </1i> 
</ul> 
</ul> 
</body> 
</html> 


在 浏览 邵 中 打开 网 页 文件 chapter7.25.html， 页 面 效 果 如 图 7-25 所 示 ， 可 以 看 到 图 像 符 


写 不 同 的 效果 。 


文件 名 称 为 chapter7.25.html， 


NOTIC, 


url (image/imagel .gi1f); 


内 容 如 下 : 
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六 设置 图 像 符号 x 十 
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es 于 机 
宇 担 照 手机 
友 音乐 手机 
和 游戏 手机 
和 ”类 如 
各 摄影 摄像 


皮影 音 娱乐 
友 智能 设备 


图 7-25 设置 图 像 符号 的 页 面 效果 


7.8.3 ”列表 编 进 


list-style-position 属性 用 来 设置 列表 中 列表 符号 或 图 像 符 号 的 位 置 。list-style-position 属 
性 可 以 使 用 表 7-16 中 的 值 来 描述 。 


表 7-16 list-style-position 属性 的 值 


值 摘 ” 述 
inside 设置 列表 符号 放置 在 文本 以 内 ， 且 环绕 文本 根据 列表 符号 对 齐 
outside 设置 列表 符号 放置 在 文本 左 侧 并 在 文本 之 外 ， 且 环绕 文本 不 根据 列表 符 
inherit 从 父 元 素 继承 


【实例 7.26】 设 置 列表 缩 进 ， 文 件 名 称 为 chapter7.26.html， 内 容 如 下 : 


<1 DOCTYEE html> 
<htm]> 
<head> 
<meta charset="utf-8"»> 


< 七 i 廿 le> 设 置 列表 缩 进 < /title> 


让 本 二 本 全 六 

ulf 
1ist-style-image: url (image/imagel .gi1if); 

} 

| 
1ist-style-limage: url(image/imagel .g1f); 
1ist-style-position: inside; 

} 

-b 1 
1ist-style-image: url (image/imagel .gi1if); 
1ist-style-position: outslde:; 

} 
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</style> 
</head> 
<body> 
和 六 
<1i> 手 机 </1i> 
«<» 
<11 class="a"> 拍 照 手机 </]1i> 
<1i class="b"> 音 乐 手机 </1i> 
<11 class="a"> 游 戏 手机 </]1i> 


</ul> 
<1i> 数 码 </1i> 
<Ul> 
<1i> 摄 影 摄像 </1i> 
<1i> 影 音 娱乐 </1i> 
<1i> 智 能 设备 </1i> 
</ul> 
</ul> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter7.26.html， 页 面 效果 如 图 7-26 所 示 ， 可 以 看 到 列表 不 
同 的 缩 进 效果 。 


口 “设置 列 专 缩 进 x + 


GCG 人 @ 127.0.0.1:8020/HTML5%2bCSS3%2bjJavaScript 网 页 设计 实用 教程 /实例 /... 衣 他 : 


图 7-26 设置 列表 缩 进 的 页 面 效果 


Sa 7.9 设置 图 片 


HTML 页 面 中 的 图 片 往往 需要 设置 ， 以 满足 视觉 要 求 。CSS 图 片 样式 定义 的 内 容 包 括 
图 片 宽 度 、 图 片 高 度 、 图 片 最 大 宽度 、 图 片 最 大 高 度 、 图 片 水 平 对 齐 和 图 片 垂 直 对 齐 。 
width 属性 用 来 设置 图 片 宽度 ; height 属性 用 来 设置 图 片 高 度 ，max-width 属性 用 来 设 
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置 图 片 最 大 宽度 max-height 属性 用 来 设置 图 片 最 大 高 度 : text-align 属性 用 来 设置 图 片 水 
平 对 齐 ; vertical-align 属性 用 来 设置 图 片 王 下 对 齐 。 
【实例 7.27】 设 置 图 片 属性 ， 文 件 名 称 为 chapter7.27.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<Style> 
#1d1 { 
vertical-align: baseline; 
} 
#1d2 1{ 
vertical-align: sub; 
} 
#103 1 
vertical-align: super; 
} 
#1d4 { 
vertical-align: top; 
} 
#1c5 
vertical-align: text-top; 
} 
#1d6 { 
vertical-align: middle; 
} 
#197 1{ 
vertical-align: bottom; 
} 
#1d8 { 
vertical-align: text-bottom; 
} 
</style> 
<tit1le> 设 置 图 片 相关 属性 </title> 
</head> 
<body> 
<p style="text-align: left; "> 图 片 水 平 对 齐 居 左 。<img 
src="image/travel .Jpg™" width="200™ height="50"></p> 
<p style="text-aliqgn: center; "3 图 片 水 平 对 齐 居中 。<img 
src="image/travel .Jpg" width="200™ height="50"></p> 
<p style="text-align: right;"> 图 片 水 平 对 齐 居 右 。<img 
src="image/travel .Jpg™" width="200™ height="50"></p> 
<p> 图 片 垂 直 对 齐 baseline。<img id=idl src="image/travel .jpg" 
width="200" heigqht="50"> 图 片 牌 直 对 齐 sub。 
<1img 1d=1d2 src="image/travel.Jpg" width="200™ height="50" 
style="vertical-—align: sub;"></p> 
<p> 图 片 垂 直 对 齐 super。<img id=id3 src="image/travel.jpg" width="200" 
height="50"> 图 片 垂直 对 齐 top。 
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<1img 1i1d=1ld4 src="image/travel .Jpg" width="200™ height="50" 
style="vertical-align: sub; "></p> 
<p> 图 片 垂直 对 齐 text-top。<img id=id5 src="image/travel .jpg" 
width="200" height="50"> 图 片 垂直 对 齐 middle。 
<1mg 1d=1d6 src="image/travel.Jpg" width="200™ height="50" 
style="vertical-align: sub;"></p> 
<p> 图 片 垂直 对 齐 bottom。<img id=id7 src="image/travel.jpg" width="200" 
height="50"> 图 片 慌 直 对 齐 text-bottom。 
<img 1d=1d8 src="image/travel.Jpg" width="200™ height="50" 
style="vertical--align: sub;"></p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.27.html， 页 面 效 果 如 图 7-27 所 示 ， 可 以 看 到 设置 图 
片 属性 的 效果 。 


De 一 口 Xx 
口 设置 图 片 相关 届 性 x 十 
局 名 127.0.0.1:8020/HTML5%abCss3962bjavascript 网 页 设计 实用 教程/ 实例 / 筑 7 齐 /chapter7.27.htmlz .去 必 


图 片 水 平 对 章 居 左 ， i 


图 片 水 平 对 齐 居 右 。 


图 片 垂 下 对 齐 super。 图 片 垂 百 对 齐 top， 


图 片 址 直 对 言 text-bottom, 


图 片 王 丰 对 这 text-top. 


片 垂 直 对 弃 bottom。 


图 7-27 设置 图 片 属性 的 页 面 效果 


CSS 的 背景 样式 用 于 定义 HIML 元 素 的 背景 ，CSS 背景 样式 定义 的 内 容 包 括 育 景 颜 
色 、 痛 景 图 片 、 育 景 重 复 和 表 景 位 首 。 


7.10.1 背景 颜色 


background-color 属性 用 来 设置 元 系 的 痛 景 闫 色 。background-color 属性 可 以 使 用 表 7-17 
中 的 值 来 摘 述 。 
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表 7-17 background-color 属性 的 值 


人 撕 术 
color 设置 背景 颜色 值 
transparent 设置 背景 颜色 是 透明 的 。 默 认 值 
inherit 从 父 元 率 继 承 


【实例 7.28]】 设 置 至 景 鼎 色 ， 文 件 名 称 为 chapter7.28.html， 内 容 如 下 : 


<IDOCTYPE html>» 


<htm]l> 
<head> 
<meta charset="UTF-—8"> 
<Stvyiey> 
#colorred { 
background: red; 
} 
#cCcoloryellow 1{ 
background-—-color: yellow; 
} 
#colortran 1 
background-—-color: transparent; 
} 
</style> 
<title> 设 置 背景 颜色 </title> 
</head> 
<body> 


<p id="colorred"> 文 本 底 色 是 红色 。</p> 
<p id="coloryellow"> 文 本 底 色 是 蓝 色 。</p> 
<p id="colortran"> 文 本 底 色 是 透明 。< /p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.28.html， 页 面 效 果 如 图 7-28 所 示 ， 可 以 看 到 背景 
色 不 同 的 效果 。 


颜 


人 


人 x 
] 设置 痛 最 户 色 A + 
CO 127.0.0.1:8020/HTML5%2bC5S3962bJavascript 网 页 设计 实用 教程 /实例 /第 7 章 /chapter7.28&.html? ..， 太 加: 
文本 底 色 是 蓝 色 . 
训 本 压 色 是 堵 阴 。 


图 7-28 设置 背景 颜色 的 页 面 效果 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


7.10.2 背景 图 片 


background-image 属性 用 来 设置 元 素 的 背景 图 片 。background-image 属性 可 以 使 用 表 7-18 


中 的 全 来 摘 述 。 
表 7-18 background-image 属性 的 值 
值 朱 ” 述 
URL 设置 痛 景 图 片 的 URL 
none 设置 无 背景 图 片 。 默 认 值 
Inherlt 从 父 元 素 继 承 


【实例 7.29】 设 置 背 景 图 片 ， 文 件 名 称 为 chapter7.29.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html>» 
<head> 
<meta charset="UTF-—8"> 
“Stityile> 
body 
background-image: url (image/castle.]Jpg); 
} 
</style> 
<title> 设 置 背 景 图 片 </title> 
</head> 
<body> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter7.29.html， 页 面 效 果 如 图 7-29 所 示 ， 可 以 看 到 背景 图 
上 不 同 的 效果 。 
中 设 本 冰晶 因 上 x + ”于 
G 


加 127.00.1:380207HTML5962bC55396objJavascript 网 页 设计 实用 教程 /实例 /第 7 章 /chapter。 三 全 : 


村 时 本 网 rr ey “re a 下 CT 和 = 国 
Me "i = ‘ Re 下 二 上 > 二 全 汪 | 涤 l 
| = i 证 = "AN 
一 im 中 有 于 my 
和 


rt 
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7.10.3 背景 重复 


background-repeat 属性 用 来 设置 元 素 的 背景 图 片 如 何平 铺 。background-repeat 属性 可 以 
使 用 表 7-19 中 的 值 来 接 述 。 


表 7-19 background-repeat 属性 的 值 


值 摘 述 
repeat 设置 背景 图 片 回 竺 直 和 水 平方 回 重 复 。 默 认 值 
repeat-x 设置 背景 图 片 问 水 平方 回 重 复 
repeat- 设置 背景 图 片 回 垂直 方向 重复 
no-repeat 议 半 至 累 图 片 无 里 复 
inherit 从 父 元 素 继 承 


【实例 7.30】 设置 育 景 重 复 ， 文 件 名 称 为 chapter7.30.html， 内 容 如 下 : 


<IDOCTYPE html> 


<htmil> 
<head> 
<meta charset="UTF-—8"> 
<style> 
#1d1 1{ 
background-image: url (image/castle.Jpg); 
background—-repeat: repeat; 
} 
#1id2 1 
background-image: url (image/castle.Jpg); 
background—repeat: repeat-—x; 
} 
#1G3 { 
background-image: url (image/castle.Jpg); 
background—repeat: repeat—y; 
} 
#1d4 { 
background-image: url (image/castle.Jpg); 
background—repeat: no-repeat.; 
} 
</style> 
<tit1le> 设 壮 衣 景 重复 </tit1le> 
</head> 
<body> 
<table> 


<tr height="300™> 
<td 1d=1d]1 width—"500™ <td> 
<id 1d=1d2 width—=—"500"></tdy> 
</tr> 
<tr height="300"> 
td 1d=193 width="500"™ </td> 
<td 1d=1d4 width—"500"™></td> 
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“tr 
</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.30.html， 页 面 效 果 如 图 7-30 所 示 ， 可 以 看 到 背景 重 
复 不 同 的 效果 。 表 格 中 四 个 格子 分 别 使 用 了 不 同 的 背景 午 复 设置 。 


四 设置 背 时 至 所 + 


12700.13020/HTML5 和 2bOss3%2bjavascript 网 页 设计 和 主 用 救 杏 /入 人 WW/ 第 7 草 /chapter7.30html? hbt=1531638198206 ” 癌 : 
p F 


图 7-30 设置 背景 重复 的 页 面 效 果 


7.10.4 背景 位 置 


background-position 属性 用 来 设置 背景 图 片 的 起 始 位 置 。background-position 属性 的 语 
法 格式 如 下 所 示 : 


{background-position :水平 位 置 垂直 位 置 ;} 
background-positon 属性 可 以 使 用 表 7-20 中 的 值 来 换 述 。 
表 7-20 ” background-position 属性 的 值 


值 描述 
lett top 
left center 
left bottom 
right top 
right center 默认 值 为 center 


rioght bottom 
center toT 
center center 


center bottom 
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续 表 
值 描 述 
XW 左上 角 是 0%0%， 右 下 角 是 100%100%。 默 认 值 为 50%。 默 认 值 为 0%0% 
Xpos ypOs 左上 角 是 0。 默 认 值 为 50%。 可 以 混合 使 用 绝对 长 度 和 % 
inherit 从 父 元 又 继承 


background-attachment 属性 用 来 设置 背景 图 片 是 任 固 定 或 者 随 看 页 和 面 深 动 而 深 动 。 
background-attachment 属性 可 以 使 用 表 7-21 中 的 值 来 摘 述 。 
表 7-21 background-attachment 属性 的 值 


值 摘 “ 述 
scroll 设置 背景 图 片 随 页 面 深 动 而 深 动 。 默 认 值 
fixed 公 站 至 累 图 片 固定 
local 设置 背景 图 片 随 滚 动 元 素 滚动 
inherit 从 父 元 素 继承 


【实例 7.31] 设置 背景 位 置 ， 文 件 名 称 为 chapter7.31.html， 内 容 如 下 : 


<IDOCTYPE html > 
<html> 
<head> 
<meta charset="UTF-—8"> 
<Sstyle> 
td { 
background-image: url (image/castle.Jpg); 
background—repeat: no--repeat,; 
} 
#1dl1 1 
background-position: left top; 
background-attachment: scroll; 
} 
#1d2 I 
background-position: center center; 
background-attachment: fixed; 
} 
#1id3 I 
background-position: 30% 70%; 
background-—attachment: scroll; 
} 
#1id4 I 
background-position: 700px 500px; 
background-attachment: fixed; 
} 
</style> 
<title> 议 生 青 景 位 生 </title> 
</head> 
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<body> 
<table border="1px solid black"> 
<tr heght="3D0"> 
<td 1id=1id1 width="500"></td> 
<td 1d=1d2 width=—"500"><ytd> 
<j/tr> 
<tr heright="300"> 
<td 1d=id3 width—="500"></td> 
<td 1d=1d4 width="500"></td> 
< Er 
</table> 
</body> 
</html> 


在 浏览 左 中 打开 网 页 文件 chapter7.31.html， 页 和 面 效 果 如 图 7-31 所 示 ， 可 以 看 到 育 景 位 
置 不 同 的 效果 。 表 格 中 四 个 格子 分 别 使 用 了 不 同 的 背景 位 置 ， 而 且 左 侧 的 格子 中 的 背景 图 
片 随 页 面 滚动 而 滚动 ， 右 侧 的 格子 中 的 背景 图 片 则 是 固定 的 。 


口 设置 背景 位 县 x 二 


人 127.0.0.1:8020/HTML5362bCSS3%zbJavascript 网 页 设计 实用 教程 /实例 /第 7 章 /chapteri.31.html? hbt=1531641753157 在 加 : 


图 7-31 wd 
Sa 7.11 设置 超 链接 属性 


CSS 链接 样式 定义 的 内 容 包 插 链 接 的 颜色 、 了 字体 和 背景 ， 这 些 设置 也 可 以 随 看 超 链 接 
的 状态 变化 而 变化 。 

超 链 接 有 四 个 状态 ， 分 别 是 a:link、a:visited、a:hover 和 a:active， 对 应 于 超 链接 的 未 访 
问 状 态 、 已 访问 状态 、 鼠 标 指 针 基 停 状 态 和 被 点 击 状 态 。 在 同时 使 用 以 上 多 个 链接 状态 时 ， 
ahover 必须 跟 在 a:link 和 a:visited 后 面 ，a:active 必须 跟 在 a:hover 后 面 。 

text-decoration 属性 用 来 设置 删除 超 链 接 的 下 划 线 : background-color 属性 用 来 设置 超 链 
接 背 景 颜 色 : background-image 属性 用 来 设置 超 链接 背景 图 瞩 。 
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【实例 7.32]】 设置 超 链接 属性 ， 文 件 名 称 为 chapter7.32.html， 内 容 如 下 : 


<1 DOCIYEE html» 


<html> 
<head> 
<meta charset="UTF-8"™»> 
<Sstyle> 
a:link 1 
text-decoration: none; 
background-color: white; 
} 
a:visited 1 
text-decoration: underline; 
background—color: yellow; 
} 
a:hover 1{ 
text-decoration: none; 
background-image: url (image/castle.Jpg); 
} 
Aactive 
text-decoration: none; 
background-image: url (image/travel .Jpg); 
} 
</style> 
<title> 设 置 超 链接 属性 </title> 
</head> 
<body> 
<h1> 设 置 超 链接 属性 </h1> 
<p> 
<a href="#"> 设 置 下 划 线 的 超 链 接 </a> 
< 下 > 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter7.32.html， 页 面 效 果 如 图 7-32 所 示 ， 可 以 看 到 超 链 接 
未 访问 的 效果 。 


后 设 司 入 枞 污 司 性 X + 


127.0.0.1:8020JHTML5W%2bC553%2bJavaScript 网 而 设计 衬 用 教程 / 空 例 / 华 7 到/chapteri.. 站 和 : 


设置 超 链 接 属性 


设置 下 划 续 的 起 链接 


图 7-32 ” 超 链 接 未 访问 的 页 面 效果 
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限 标 指针 蕊 集 的 超 链 接 市 有 下 划 线 ， 并 使 用 了 至 景 图 片 ， 页 面 效果 如 图 7-33 所 示 。 


| | 一 口 汪 
六 设置 牛 链 接 屋 性 x 十 
中 加 127.0.0.1:8020/HTML5%2bCSS3%2bjJavaScript 网 页 设计 实用 教程 /实例 /第 7 章 /chapter7.. 丰 站 : 


设置 起 链接 属性 


127.0.0.1:802D0/HTML53%2bCLSs3%2bjJavascript 网 页 设计 案 用 款 得 /案例 /第 7 总 /chapter7,32html?_hbt=1531722374139# 


图 7-33” 超 链 接 鼠 标 指针 悬 停 的 页 面 效 果 
se，7.12 设置 表单 


表单 是 一 个 包含 表单 元 素 的 区 域 ， 表 单元 又 包 括 输 入 域 、 多 行文 本 域 、 标 俭 、 下 拉 列 
表 、 按 钮 等 ， 用 户 可 以 使 用 表单 元 素 输入 内 容 进 行 交 互 。CSS 表单 元 素 没 有 定义 专用 的 表 
单 属性 ， 用 户 可 以 使 用 字体 、 背 景 、 闫 色 、 边 框 等 基本 属性 来 设计 表单 元 系 样 式 。 
font-family 属性 用 来 指定 表单 元 素 的 字体 ，font-size 属性 用 来 设置 字体 大 小 ，font-style 
属性 用 来 指定 文本 的 字体 样式 。background-color 属性 用 来 设置 表单 元 素 的 背景 颜色 ， 
background-image 属性 用 来 设置 表单 元 聚 的 背景 图 片 。color 属性 用 来 设置 表单 元 素 中 文本 
的 颜色 。border-color 属性 用 来 设置 表单 元 系 四 个 边框 的 颜色 ，border-style 属性 用 来 设置 表 
单元 系 四 个 边框 的 线 型 ， border-width 属性 用 来 设置 表 蛙 元 素 四 个 边框 的 冤 度 ,border-radius 
属性 用 来 设置 表单 元 系 四 个 角 的 形状 。 
text-decoration 属性 用 来 设置 删除 超 链接 的 下 划 线 ,background-color 属性 用 来 设置 
接 背 景 颜 色 ，backsground-imase 属性 用 来 设置 超 链接 背景 图 片 。 
【实例 7.33】 设 置 表单 属性 ， 文 件 名 称 为 chapter7.33.html， 内 容 如 下 : 
<1DOCTYPE html> 
<html> 
<head> 
<meta Charset =" UTF- 8"»> 
<title> 设 置 表单 属性 </title> 
<Style> 
#formil 1 


text-align: center; 


超 链 


} 
#forml fieldset 1 
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width: 400px; 


border: 3px solid #aaa; 
background-image: url (image/flower.]Jpg); 
text—-align: left.; 

} 

#forml #text { 
width: 18em; 
border: lpx solid #000000; 
font—family: "未 怀 "， sans serif; 
font—size: lA4px; 
COlor: #666; 

} 

#4forml #textarea 1 
width: 16em; 
height: 4em; 
border: lpx solid #000000; 

} 

#forml #5select 1 
background—-color: yellow; 

} 

#forml #buttonil, #button2 { 
width: 5em; 
height: 2em; 
border—color: black; 
border-—style: solid; 
border-width: lpx; 
border-radius: 0.5em; 
font-family: "楷体 "; 
text—-align: center; 

} 


</style> 
</head> 
<body> 
<form id="forml™> 
<fieldset> 


<legend> 表 单 结构 </legend> 
<p><13bBel>XE 本 椎 ; <7lapel><input type="text" 
1d="text"><br></p> 
<p><label> 多 行文 本 杠 :; </label><textarea 
1d="textarea"></textarea></p> 
<p><labe1l> 复 选 框 : </Labe1> 
<1abe1> 复 选项 1</1abe1><input type="checkbox" 
name="checkboxl"™" lid="checkboxl1l™ /> 
<1abe1> 复 选项 2</label><input type="checkbox" 
name="checkbox2"™ 1q="checkbox2" /> 
<1abe1> 复 选项 3</1label><input type="checkbox" 
name="checkbox3"™ 1id="checkbox3" /> 
</p> 
<p><labe1> 单 选 按钮 : </1abel> 
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<label> 单 选 按 钮 1</label><input type="radio" 
name="radio™" 1d="radiol™ /> 
<labe1>3 单 选 按 钮 2</1abel><input type="radio" 
name="radio™" 1d="radio2™ /> 
<1abe1> 单 选 按钮 3</1abel><input type="radio" 
name="radio™" 1d="radio3"™ /> 
</p> 
<p><labe1l> 下 拉 菜 单 : </1label> 
<select name="select™ id="select"> 
<OptiDn valne="1"> 项 </ optiony 
<Option VATHe="2"> 人 这 英 2</0ption> 
<Option valge="3"3 选 项 3</option> 
</select> 
</p> 
<p> 
<input type="submit"™" name="buttonl" id="buttonl™ value=" 提 XX" /> 
<input type="reset™ name—="button2" id="bputton2" Value=” 嫩 年" /> 
</p> 
</fieldset> 
</form> 
</body> 
</{html> 


在 浏览 器 中 打开 网 页 文件 chapter7.33.html， 页 面 效 果 如 图 7-34 所 示 ， 可 以 看 到 表单 设 
置 的 效果 。 
站 设置 志 单 层 性 x 十 


”全 127.0.0.1:8020/HTML5962bC553%2bJavascript 网 五 设计 实用 教程 /实例 /第 7 章 /chapter7.. 证 合 : 


三 表单 结 移 - 


图 7-34 设置 表单 属性 的 页 面 效 果 


wy 7.13 ” 回 到 工作 场景 


通过 7.2~7.12 节 内 容 的 学 习 ， 已 经 学 习 了 CSS 的 概念 、 语 法 和 作用 ， 掌 握 了 样式 表 的 
使 用 方法 ， 掌 握 了 不 同类 别 的 选择 器 的 使 用 方法 ， 掌 握 了 使 用 样式 表 来 设置 字体 属性 、 文 
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本 段落 属性 、 表 格 属 性 、 列 表 必 性、 图片 属性 、 痛 景 属性 、 超 链接 属性 和 表单 属性 。 下 面 
是 儿 个 绿 合 实例 。 

【工作 过 程 一 】 制 作 网 页 一 一 《多 变 超 链 接 》。 工 作 过 程 一 的 页 面 效果 如 图 7-35 所 示 ， 
其 中 五 个 超 链接 的 设置 如 文字 所 示 。 


] 六 识 置 起 链接 的 不 同样 式 x 十 


CG 加 127.0.0.1:8020/ 第 7 章 /chapter7.34.html? hbt=1553241998221 让 全 


将 最 标 指针 移 至 链接 上 改变 样式 。 


二 7 
一 "| Noti EW 


四 个 超 链接 的 


全 


第 五 个 超 链 接 的 字样 式 会 变 。 


图 7-35 《多 变 超 链接 》 的 页 面 效果 
创建 网 页 ， 文 件 名 为 chapter7.34.html， 内 容 如 下 所 示 : 


< DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 设 置 超 链接 的 不 同样 式 </title> 
<Sstyle> 
a.one:1ink 1 
COloOr: #000000; 


a.one:visitedqd 1 
Color: #0000ff; 


a.one:hover f{ 
coOolor: #ffcc0O0: 


a.two:link 1 
coOlor: #000000， 


a.two:visited 1 
COlor: #0000ff; 


a.two:hover f 
font—size: 150%s 
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a.three:1link { 
COlor: #000000; 


a.three:visited 1 
COlor: #0000ff; 


a.three:hover 1 
background: #66ff66; 


a FOr=11nk 了 
color: #000000; 


a. Fourvisited. | 
color: #0000ff; 


a.four:hover I 
font-family: "楷体 ": 


可 Fivweslink 1 
CoOlor: #000000; 


text—decoration: none:; 


a.five:visiteqd { 
Color- #0000ffs 


text—decoration: none; 


a.five:hover 1 
text—-decoration: underline; 
} 
</style> 
</head> 
<body> 
<p> 将 鼠标 指针 移 人 至 链接 上 改变 样式 。</p> 
<p><b><a Class="one™" href="/css/" target=" blank"> 第 一 个 超 链接 的 颜色 
pi ESCAUSRAEGY 
<p><b><a class="two" href="/css/" target=" blank"> 第 二 个 超 链接 的 字号 
会 变 。</a></Ab></Ap> 
<p><b><a class="three" href="/css/" target=" blank"> 第 三 个 超 链接 的 背 
景 颜色 会 变 。</a></b></p> 
<p><b><a class="fourn href="/css/" target=" blank"> 第 四 个 超 链接 的 字 
体会 变 。</a></b></p> 
<p><b><a class="five" href="/css/" target=" blank"> 第 五 个 超 链接 的 字 
样式 会 变 。</a></b></p> 
</body> 
</html> 


【工作 过 程 二 】 制 作 网 页 一 一 《市 水 平 寻 航 栏 的 网 站 首页 》。 工 作 过 程 二 的 页 面 效果 
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六 ”设置 元 主 样式 的 水 于 导航 栏 X | 十 
局 加 127.00180207HTML5962bCSS3%2bJavascript 网 页 设计 实用 教程 /实例 /第 7 章 /chapter.3.、 让 ”和 


提示 : 这 是 一 个 壳 全 样式 的 水 平 导航 栏 的 例子 。 


图 7-36 《市 水 平 导 航 栏 的 网 站 首页 》 页 面 效 果 


创建 网 页 ， 文 件 名 为 chapter7.35.html， 内 容 如 下 : 


<1DOCIYEE html> 


<html> 
<head> 
<meta charset="utf-8"™ /> 
< style> 
ul f{ 


1ist-style-type: none; 
margin: 0; 

padding: 0; 
padding-—top: 6€px; 
padding-bottom: 6px; 


11 1 
display: inline; 


“In 

:Vlisitedqd f 
font-welght: bold; 
COlor: #EFFFEFFF; 
background—color: #98bf2]; 


text-align: center; 


A 


出 


padding: 6px; 
text-decoration: none; 

} 

a:hover, 

aactiwve 
background—color: #1A991n; 
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</style> 
<title> 设 置 完全 样式 的 水 平 导 航 栏 </title> 
</head> 
<body> 
< 上 > 
“|i 
<a href="#home"> 自 贝 </a> 
< br 
<11> 
<a href="#news"> 新 闻 </a> 
< /ES 
交工 人 
<a href="#product"> 产 品 </a> 
六 并 于 于 
<11> 
<a hreft=" helpn> 帮 助 </a> 
< 
</ul> 
<p><b> 提 示 : </b> 这 是 一 个 完全 样式 的 水 平 导 航 栏 的 例子 。< /p> 
</body> 
</html> 


【工作 过 程 三 】 制 作 网 页 一 一 《市 垂直 导航 栏 的 网 站 首页 》。 工 作 过 程 三 的 页 面 效 果 
如 图 7-37 所 示 。 


| 
癌 ” 设 冒 寺 全 样式 的 土 百 导航 栏 x | 十 


| ;127.0.0.1:8020/HTML5%2bCSS33 允 2bjJavascript 网 页 设计 实用 救 程 / 宇 司 /第 7 章 /dhapter7.3.. 让 四 : 


提示 ; 这 是 一 个 完全 样式 的 垂直 导航 栏 的 例子 。 


7-37 《 带 垂直 导航 栏 的 网 站 首页 》 的 页 面 效果 
创建 网 页 ， 文 件 名 为 chapter7.36.html， 内 容 如 下 所 示 : 


<IDOCTYPE html>»> 
<html> 
<head> 
<meta charset="utf-8™ /> 
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“ty 

ul 1 
1ist-style-type: none; 
margin: 0; 
padding: 0; 

} 

a Link, 

a:visited 4 
display: block; 
font-welght: bold; 
color: 着 FEEEEEE， 
background-cColLor: #98bf21; 
width: 120px; 
text-align: center; 
padding: 4px; 
text-decoration: none; 

} 

a:hover., 

a-active 
background—color: #1A991n; 


} 
</style> 
<title> 设 置 完 全 样式 的 垂直 导航 栏 </title> 
</head> 
<body> 
<ul> 
区 
<a href="#home"> 自 贝 </a> 
< 1 
二 
<a href="#news"> 刹 闻 </a> 
< 11> 
i 
<a Lref—"Pproducet"™Sr a> 
< i> 
主演 
<a href="#help"> 帮 助 </a> 
< I> 
< 
<p><pb> 提 示 : </b> 这 是 一 个 完全 样式 的 牌 直 导 航 栏 的 例子 。</p> 
</body> 
</hntml> 


【工作 过 程 四 】 和 制作 网 页 一 一 《市 完全 样式 的 横 回 导航 栏 的 网 站 首页 》。 工 作 过 程 四 
的 页 面 效 果 如 图 7-38 所 示 。 


门 设置 计生 样 志 的 慌 向 导航 栏 X | 十 
;人 127.0.0.1:8020JHTML5%2bCS53%62bjavascript 网 页 设计 实用 教程 / 空 全 /第 7 章 /chapter7.3..， 古 全 


提示 : 这 是 一 个 完全 样式 的 横向 导航 栏 的 例子 . 


图 7-38 《 带 完全 样式 的 横向 导航 栏 的 网 站 首页 》 的 页 面 效 果 
创建 网 页 ， 文 件 名 为 chapter7.37.html， 内 容 如 下 所 示 : 


<!IDOCTYPE html> 


<html> 
<head> 
<meta charset="utf-8™ /> 
<style> 
ul f{ 


1ist-style-type: none; 
margin:. 07 

padding: 0; 

overflow: hidden; 


} 
11 4 
float: left,; 
} 
= 


a:visitedqd 1 
display: block; 
width: 120px; 
font-welght: bold; 
COlor: #EFFFEFFF; 
background—color: #98bf21; 
text—align: center: 
padding: 4px; 
text-decoration: none; 

} 

a:hover., 

tactwve 4 
background—color: #171A991n; 
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</style> 


<tit1le> 设 置 完 全 样式 的 横 回 导航 栏 </titLe> 
</head> 
<body> 
<uUul> 
| 
<a href="#home"> 自 贝 </a> 
ebx 
Ty 
<a href="#news"> 新 闻 </a> 
< ES 
<11> 
<a Iret="#product"™Sr </as 
< LF1> 
<a href="#help"> 帮 助 </a> 
< 
</ul> 
<p><b> 提 示 : </b> 这 是 一 个 完全 样式 的 横向 导航 栏 的 例子 。< /p> 
</body> 
</html> 


【工作 过 程 五 】 制 作 网 页 一 一 《用 尸 个 人 资料 》。 工作 过 程 五 的 页 面 效果 如 图 7-39 所 示 。 


[1 轩 户 注册 基 | 十 
避 人 12r0018oO20HTML592bCSS392bJavascript 陋 页 设计 详 用 教程 庶 伍 /第 7 章 /chapter7.38.htmly hbt=15323...。 富 人 : 


个 人 资料 


用 户 名 : 韩 梅 竹 
E-mail : 壮 


[请 输 六 正确 的 邮 第 带 * 号 为 必 盾 项 


图 7-39 《用 户 个 人 资料 》 的 页 面 效果 


创建 样式 表 文 件 ， 文 件 名 为 chapter7.38.css， 内 容 如 下 所 示 : 


ul 1 
1ist-style-—type: none; 
} 
} 
| 
width: 953px; 
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FlLoats Jefty 

border: lpx solid #ddd; 
background: #FFEF; 
text-—-align: left; 

} 

-UI .rr name 1 
display: inline-block:; 
*display: linline; 
zoom: 1l1; 
height: 40px; 
11ne-hel1ght: A40px; 
font—size: lApx; 
color: #8BI1919s 
padding: 0 20px; 
border-right: lpx solid #ddd; 
horder=bottom: lex sol1d. #dad; 

} 

:USer m 1{ 
width: 100%; 
padding-bottom: 40px; 

} 

-USer m .u mr 1 
width: 200px; 
float: right; 
text-allign: center; 
margin—right: 100px; 

} 

-USer m -U mr img { 
width: 100px; 
height: 100px; 
vertical-align: top; 

} 

-USer m .yu mr pl 
width: 100%; 
height: 28px; 
line-height: 28px; 
Font -Size: Lilpx; 
coOolor: #656565; 

} 

-Ser m .a mr .110 1 
font=sizes 12px3 
height: 15pxs; 
line—height: 15px; 

} 

-User m -U mL 1 
width: 480px; 
float: left; 
padding-top: 30px; 
min—height: 417px; 
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} 

-er m ll ml LT 4 
width: 100%; 
margin—bottom: 15px; 

} 

:er m su ml 11 title; 

:SEE su ml 11 1 m I 
display: block; 
fliloats Lefts 

} 

-er WH mL TL EELe 4 
width: 140px; 
height: 30px; 
line-—height: 30px; 
text—-align: right; 
Font>=sizes lx; 

Color: #5ESEDE; 

} 

-USer m -U ml 11 .li1m i 
width: 335px; 
11ne-helght: 240%; 
font-size: l14px; 

Coolsrs F555; 

} 

.User m a ml 11 .11 m input 1 
width: 300px; 
height: 30px; 
border: lpx solid #ddd; 
vertical-align: top; 
padding: 0 4px; 
font-size: l14px; 
color: 0535s 

er ms ml 1 slim 3 
font—style: normal; 
color: #8C1919; 
margin—left: Spx; 
font—-size: l16px; 

} 

serm m1 mp1 
width: 100%; 
height: 15pxs 
line—height: 15px; 
font—size: 12px; 
color: #9939: 

} 

-er m0 ml Iisax .1 m Input, 

-ser m sn mL 11.56% ss11. m span 1 
display: inline; 
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ZOOmMm: 工 ; 
vertical-align: top; 
width: auto; 

} 

-ser m st mL Tis58X sl m 3nput 1 
width: 1l15px; 
height: 1l15px; 
margin—top: 8px; 

} 

ser m -=m ml T1586% 211 Wm span | 
height: 25px; 
line—height: 25px; 
marglin—right: 20px; 
margin—top: 3px; 

} 

ser m oa ml 11-ptn Input 1 
width: 130px; 
ergqht: 40pX; 
bordaer: Dpx; 
background: #8B1919; 
color: #FEFFF'; 
font-size: l16px; 
text-allign: center; 
line-height: 40px; 
margin—left: 100px; 
cursor: Pointer; 
margin—top: 1l0px; 

} 


创建 网 页 ， 文 件 名 为 chapter7.38.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 


<head> 
<meta charset="UTF-8"»> 
<link rel="stylesheet™" type="text/css"™" href="css/chapteri.38.css™ /> 
<title> 用 户 注 册 </titLe> 
</head> 
<body> 
yw elass— "hn r"> 
<div class="r name"> 个 人 资料 </div> 
“dv clase "aer mM 
<Uul ciliass="u mis 
a 
<apan Class—="title"S3 用 户 和 名: </sparns> 
<div class="1i m"> 韩 梅 梅 </div> 
Cl 
Ll 
<span class="title">E-mail: </span> 
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diw celase— "11 Mm" 
<input name="™" type="text"><1>*</1> 
<p> (请 输入 正确 的 邮箱 带 * 号 为 必 填 项 ) </p> 
<fd1lv> 
“RL 
<11 class="sex"> 
<span class="title"> 性 别 : </span> 
< olass— "1 mS 
<input name="sex" type="radio™ value="™" J]d="s1" 
checked> 
<span><1label for="™s1"> 保 密 </label></apan> 
<input name="sex"™ type="radio™ value="" 
1d="s2"™"> 
<span><label for="s32"™> 岂 </1label></span> 
<input name="sex™" type="radio™ value="" 
1d="s3"> 
namiaDel For "3" me/ ilabery /spany 
</d1liv> 
< 1 
1 1》 
<span class="title"> 出 生日 期 :</span> 
Hiey Ellas "lt Mm"> 
<input name="™" type="text"> 
<idiv> 
Hl 1 
< 1 
<span class-"title"> 电 请 : </span> 
“di lane "Tl mm" 
<input name="™" type="text"> 
</d1iv> 
LS 
<11» 
<Sspan class="title"> 手 机 : </span> 
“dm elase "tt my 
<input name="™" type="text"> 
< > 
i 
了 和 
<span class="title">Q Q: </span> 
“di elass—"Ll: m"> 
<input name="™" type="text"> 
< /Hlv> 
HL 
1i Class—="Dti"><innmtE namee™™ type "soupmnit™ varnaes "WH 
定 "></1i> 
«ul 
“A lse—" Ms 
<a href="#"> 
<1mg SIC="1Image/pic .JBg" alt="™ /> 
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<p> 修 改 头 像 </p> 
<p class="f10">( 注 :头像 推荐 尺寸 为 120*120)</p> 
</a> 
</div> 
</d1liv> 
</d1iv> 
</body> 


</html> 


人 7.14 工作 实 训 营 


7.14.1 训练 实例 


1. 训练 内 容 

自行 设计 个 人 信息 网 站 ， 包 含 三 个 网 页 ， 用 于 介绍 个 人 信息 。 三 个 网 页 的 风格 一 致 
网 页 中 使 用 了 文字 、 图 片 、 表 格 、 列 表 、 超 链接 和 表单 元 素 ， 并 具备 导航 栏 。 网 页 中 各 元 
素 的 设置 要 求 采 用 CSS。 

2. 训练 目的 

> ”掌握 CSS 的 语法 和 作用 。 

> ”掌握 引入 CSS 的 方法 。 

> ”掌握 不 同 选择 器 的 使 用 方法 ， 

> ”掌握 使 用 CSS 设置 文字 、 图 片 、 表 格 、 列 表 、 超 链接 和 表单 元 素 。 

3. 训练 过 程 

参照 7.13 节 中 的 操作 步 又 。 


注意 不 同 选择 器 的 作用 域 。 


7.14.2 工作 实践 常见 问题 解析 


【常见 问题 1】 在 使 用 CSS 时 ， 有 没有 什么 规范 ? 

【 答 】CSS 代码 在 书写 时 要 注意 以 下 规范 : 避免 选择 器 租 套 层级 过 多 ， 少 于 3 级 即 可 ; 
不 要 随意 使 用 id 选择 器 ， 应 该 按 需 使 用 ; 考虑 使 用 CSS 缩写 属性 ， 比 如 padding:0 10px 5px 
5px 等 ， 这 样 可 以 精简 代码 ， 同 时 又 能 提高 用 户 的 阅读 体验 ; 不 缩写 单词 ， 除 非 一 看 就 明日 
的 单词 。 

【常见 问题 2】CSS 怎样 命名 才 规 范 ? 

【 答 】 常 用 的 CSS 命名 规则 如 下 。 


头 : header 


内 容 : 


尾 : 


content/contaner 


footer 
导航 : 
栏目 : 


nav 
sldebar 


column 
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页 面 外 围 控 制 整体 布局 宽度 : wrapper 
左右 中 : left right center 
登录 条 : loginbar 

标志 : logo 

广告 : banner 

页 面 主 体 : main 

热点 : hot 

新 闻 : news 

下 载 : download 

子 导航 : subnav 

订单 : menu 

子 末 蛙 : submenu 

搜索 : search 

友情 链接 : friendlink 


页 脚 : 
版 权 : 


footer 


copyright 
scroll 


内 容 : content 
标签: tags 
文章 列表 : list 
提示 信息 : msg 
小 技巧 : tips 
栏目 标题 : title 


加 入 : 
: Sulde 
: SeIVlCce 


Jomus 


: Ieglster 
A status 


: Vote 


合作 伙伴 : partner 
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Re 7.15 本 章 小 结 


CSS 的 中 文 名 称 为 层 登 样式 表 或 级 联 样式 表 ， 贡 文人 全称 为 Cascading Style Sheets。CSS 
是 一 种 定义 样式 结构 如 人 字体、 颜色、 位置 等 的 语言 ， 能 够 对 网 页 中 元 系 位 置 的 排版 进行 像 
系 级 精确 控制 ， 文 持 几 乎 所 有 的 字体 字号 样式 ， 拥 有 对 网 页 对 象 和 模型 样式 编辑 的 能 力 。 
CSS 不 仅 可 以 静态 地 修饰 网 页 ， 还 可 以 配合 各 种 脚本 语言 动态 地 对 网 页 各 元 素 进行 格式 化 。 

CSS 使 得 网 页 的 样式 和 内 容 相 分 离 ， 对 于 网 站 开发 和 维护 提供 了 极 大 的 便利 。 

CSS 样式 表 中 包含 了 多 个 样式 规则 ， 这 些 样式 规则 是 可 应 用 于 网 页 中 元 率 的 格式 化 指 
。 每 个 样式 规则 由 选择 器 、 属 性 及 属性 值 组 成 ， 基 本 格式 如 下 : 

选择 器 {属性 : 值 } 

其 中 , 选择 器 是 需要 改变 样式 的 HTML 元 素 , 属性 是 选择 器 指定 的 标记 所 包含 的 属性 ， 
值 是 属性 所 设置 的 值 。 

CSS 中 的 第 用 单位 包括 长 度 单 位 和 颜色 单位 。 

CSS 样式 表 根据 其 在 HIML 页 面 中 的 位 置 ， 分 为 内 联 样式 、 内 部 样式 表 和 外 部 样式 表 
三 种 。 根据 选择 器 对 于 HTML 页 面 中 元 系 的 影 啊 范围 , 将 选择 器 分 为 1d 选择 右 、 类 选择 器 、 
标记 选择 器 、 全 局 选择 费 、 群 组 选择 器 、 后 代 选 择 器 和 伪 类 选择 器 等 类 别 。 

设置 字体 : font-family 属性 设置 文本 的 字体 系列 ，font-size 属性 设置 文本 的 大 小 ; 
font-style 属性 设置 文本 的 风格 ; color 属性 设置 文本 的 颜色 。 

设置 文本 段 钞 : text-indent 属性 设置 文本 块 中 首 行 文本 的 缩 进 : text-align 属性 设置 元 系 
文本 的 水 平 对 齐 方式 : vertical-align 属性 设置 元 系 文 本 的 王 直 对 齐 方式 ; text-decoration 属性 
设置 添加 到 文本 的 修饰 ，line-height 属性 设置 文本 的 行 高 ，letter-spacing 属性 设置 文本 的 字 
间距 :; word-spacing 属性 设置 单词 间 的 间距 。 

设置 表格 : border 属性 设置 表格 边框 的 线 守 、 线 型 和 闫 色 ; width 属性 设置 表格 宽度 ; 
height 属性 设置 表格 高 度 ; text-align 属性 设置 表格 文字 水 平 对 齐 ; vertical-aligh 属性 设置 表 
格 文字 垂直 对 齐 ; padding 属性 设置 表格 文字 和 边框 之 则 的 距离 ;color 性 绊 轩 表 娄 文字 着 
色 ; backsground-color 属性 设 且 表格 有 有 景 绍 色 ; border-collapse 属性 设置 表格 边框 的 边框 是 
A 个 单一 的 边框 ， 还 是 像 在 标准 的 HIML 中 那样 分 开 显 示 。 

i | 表 : list-style-type 属性 设置 列表 符号 的 类 型 ;list-style-image 属性 使 用 图 像 符 号 
来 蔡 换 列表 符号 ， list-style-position 属性 规定 列表 中 列表 符号 或 图 像 符 号 的 位 置 。 

设置 图 片 : width 属性 设置 图 片 宽度 : height 属性 设置 图 片 高 度 ; max-width 属性 设置 图 
厂 最 大 冤 度 ; max-height 属性 设置 图 片 最 大 局 上 度 ; text-align 属性 设置 图 片 水 平 对 齐 ; 
vertical-align 属性 设置 图 片 牌 直 对 齐 。 

设置 背景 : background-color 属性 设置 元 系 的 背景 闫 色 ; background-image 属性 设置 元 
系 的 背景 图 像 ，background-repeat 属性 设置 元 系 的 背景 图 像 如 何平 铺 ; background-position 
属性 设置 背景 图 像 的 起 始 位 置 。 

设置 超 链 接 : 超 链 接 有 四 个 状态 ， 分 别 是 a:link、ai:visited、a:hover 和 a:active。 在 同时 
使 用 以 上 多 个 链接 状态 时 ,ahover 必须 跟 在 a:link 和 a:visited 后 面 ,a:active 必须 跟 在 a:hover 


必 
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后 面 。text-decoration 属性 设置 删除 超 链接 的 下 划 线 ，backsground-color 属性 设置 超 链接 背景 
闫 色 ，background-image 属性 设置 超 链接 背景 图 片 。 

设置 表单 : CSS 表单 元 素 没有 定义 专用 的 表单 属性 ， 用 户 可 以 使 用 字体 、 育 景 、 颜 色 、 
边框 等 基本 属性 来 设计 表单 元 素 样式 。 


Sa 7.16 习 题 


一 、 单 项 选择 题 


1. 有关 样式 表 的 说 法 ， 正 确 的 是 ( 小 
A. 通过 样式 表 ， 用 户 可 以 使 用 自己 的 设置 来 覆盖 浏览 器 的 常规 设置 
B. A -gb 
C. 样式 表 不 能 重 
D. pp 来 设置 字体 和 磊 色 
2. ” 若 要 在 网 页 中 插入 样式 表 main.css， 以 下 用 法 中 正确 的 是 (  )。 
A. <link href="maimn.css" type="text/css" rel=stylesheet"> 
B. <link src="main.css" type="text/css" rel=stylesheet"=> 
C. <link href="mam.css" type="text/css"> 
D. <nclude href="main.css" type="text/css" rel=stylesheet"> 
3. ”下面 不 属于 CSS 插入 形式 的 是 (  )， 
A. 索引 式 B. 内 联 式 C. 谈 入 式 D. 外 部 式 
4. 在 CSS 中 ,垂直 对 齐 属性 的 取 值 为 top 表示 (  )。 
A. 写 在 其 他 元 素 的 上 方 
B. 写 在 其 他 元 素 中 线 的 上 方 
C. 以 其 他 普通 元 素 的 顶 线 作为 被 定义 元 素 的 顶 线 
D. 以 其 他 文本 元 素 的 顶 线 作为 被 定义 元 素 的 顶 线 
5. 若 CSS 的 文本 修饰 属性 取 值 为 text-decoration:overline， 则 表示 ( ) 
A. 上 划 线 B. 下 划 线 C. 不 用 修饰 D. 横 线 从 字 中 间 算 过 


二 、 填 空 题 
1]. 创建 一 个 样式 表 ， 可 以 设置 当前 页 面 中 id 为 compact 元 素 的 内 容 的 字体 为 斜体 。 


能 实现 该 功能 的 样式 表 代 码 是 <style> </style>。 
2. 为 了 给 页 面 所 有 <hl> 标 题 创建 样式 规则 ， 指 定 将 所 有 的 <h1> 标 题 显示 为 蓝 色 ， 字 
体 显 示 为 Arial。 能 实现 该 功能 的 样 pr </style>. 
3. 为 div 设置 类 a， 应 编写 HTML 代码 <div ></div>。 
4. 文字 居中 的 CSS 样式 表 代 码 是 <style> </style>。 


5. 在 HTML 中， 使 用 HIML 元 素 的 class 属性 ， 将 样式 应 用 于 网 页 上 某 个 段落 ， 使 
其 文字 据 色 为 红色 的 代码 如 下 所 示 : <p class="firstp"> 这 是 一 个 段落 </p>。 那 么 ， 能 实现 该 
功能 的 样式 表 代 码 是 <style> </style>。 
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操作 题 
1. 创建 网 页 《 收 货 人 信息 》， 文 件 名 为 ex7.1.html， 对 应 的 页 面 效 果 如 图 7-40 所 示 。 


新海 必 世 好 地 

电话 号 后、 手机 号 选 十 一 项 ,其 余 均 为 必 寺 项 

所 在 地 区 ” 

中 国 大 陆 | 北京 市 "| 

详细 地 址 ” 

刘 1 这 此 加 实 十 写 话 捆 的 昼 此 地 疆 ， 司 训 匠 症 名 要 。 和 门牌 导 码 ， 术 届 和 启 

阅 号 等 信息 

如 你 不 清 林 好 道 区 导 ， 请 请 号 000000 

收 货 人 姓名 * 

长 度 不 旭 过 25 个 字符 

手机 号 码 

| 中 国 大 陆 +86 ”| 电话 号 玛 。 手 机 导 码 必须 填 一 项 

电话 号 码 

| 中 国 大 陆 +86 "| 区 寻 ”电话 导 丽 ”|- 分 机 

已 设置 为 黑 认 收 货 地 址 

收 货 人 所 在 地 区 详细 地 址 邮编。 电话 /手机 摄 作 

李 平 。 “江苏 省 南京 市 套 楼 区 中 山大 街 5 号 10 圭 205 室 210000 86-13veeee00 修改 | 淹 脸 
亨 平 江 茵 省 南京 市 战 慨 区 中 山大 内 5 屋 10 性 205 室 210000 86=13"*00 修改 | 到 吐 
李 平 。 ”江苏 省 南京 市 鼓楼 区 中 山大 街 5 号 10 习 205 室 。 210000 。 86-13**eerx00 修改 | 到 只 
地 平 。 江苏 省 南京 市 喜 楼 区 中 山大 街 5 号 10 榨 205 室 。 210000 。 86-13*weeeex00 修改 | 到 给 


图 7-40 文件 ex7.1.html 对 应 的 页 面 效 果 


2 创建 网 页 《健康 》， 文 件 名 为 ex7.2.html， 对 应 的 页 面 效 果 如 图 7-41 所 示 。 页 面 中 
的 主题 、 图 片 和 文字 可 以 自行 设置 ， 布 局 相似 即 可 。 


证 让 我 们 本 苔 下 虽 站 填 案 品 
二 001:60200HTIWL52DCS53362bJawascript 辣 页 设计 实用 疙 程 / 辣 题 /第 7 训 /Ex7.zhtirmlP hbt=1532335952393 硬 和 : 
TS 他 么 大 名 导 ? gr 
, E i 健康 是 指 二 个 人 在 身体 、 精 神 和 社会 等 方面 都 处 于 良好 的 状态 。 健 康 包 括 两 个 方面 的 内 容 : 一 是 主要 脏 器 无 疾病 ， 身 体形 志 发 育 良 。 国庆 We a 
由 | 建 好 ， 件 开 均匀， 人体 上 系统 县 有 良好 的 生理 功能 ， 有 较 揭 的 身体 活动 能 力 和 劳动 能 力 ， 这 是 对 健康 景 基地 的 要 求 ; 二 是 对 疾病 的 抵 nn 
f oe 抗 衣 力 较 强 能够 适应 环境 变化 ， 各 种 生理 刺激 以 及 致 病因 素 对 身体 的 作用 ， ns 
,A UL 必 。。 贡 办 卫 和 组 织 保 出 “从 训 不仅 旦 慌 休 没 有 庄内 ,还 要 呈 备 心理 健康 、 社 会 适应 身 好 和 有 送 德 ”， 因 此 ,现代 人 的 健 束 内 容 包 括 ; 明 
i -二 体 伍 遍 ， 心 是 便 康 、 心 员 健 康 ， 社 会 便 康 ， 丰 力 健康 、 谨 合 姓 康 、 环 境 隐 康 等 。 健 康 旦 人 的 基本 权利 。 健 康 旺 人 生 的 第 一 财富 。 右 江 本 类 天 
[ 看 白 夺 
oe Iness ,健康 状 ; 吕 /状态 的 英 交 星 : Health。 在 一 些 词典 中 ， "健康 ”通常 被 简单 扼要 地 定义 为 “机体 处 于 正常 运作 状 志 ,没有 疾病 ”。 这 是 传 。 “ 转 半 
多 了 : 人 门 硬 主 是 把 疾病 看 成 吓 机 体 受 到 | 干 扰 ,导致 功能 下 降 ,生活 质 骂 芝 到 损 玫 ( 主要 由 肉体 丫 辣 引起 ) 或 早 亡 。 i 
: 率 


Sn ek #6 简明 三 列 梧 百 科 涪 书 》1987 年 中 广 版 的 定义 是 : “健康 ， 使 个 体能 长 时 期 地 才 应 环境 的 身体 、 情 绪 、 精 神 及 社交 方面 的 能 力 。” “ 疾 。 【本 于 过 
商 ， 忆 产 定语 居 或 体征 的 异常 生理 或 心理 状 赤 ”是 “人 体 在 致 病因 素 的 影响 下 ， 固 言 组 织 的 形 志 ， 功 能 情商 正常 标准 的 忧 坟 。"” “ 愤 康 可 用 可 测 吓 的 数值 {如 | 诬 自 寻 二 


a 体 和 更、 体温 、 脉 捷 、 血 应、 视力 等 ) 来 省 虽 ,但 汪 标准 很 难 掌握 ，” 这 一 概念 虽然 在 定 沁 中 提 到 心理 因素 ， 但 在 测量 和 痉 病 分 类 方面 没有 县 体内 容 。 可 以 说 es 
这 是 从 生物 医学 模式 向 生物 ， 心 理 ， 社 会 医学 模式 过 滚 过 程 中 的 产物 ， 一 方面 ， 坟 种 转化 尚 缺乏 足够 的 临床 实 踪 资 料 提供 理论 的 概括 ; 另 一 方面 捞 写 者 虽 烽 接 营 了 ， 习 慢 . 
新 的 医学 模式 的 思想 ,但 难以 作 进 一 步 的 理论 探讨 。 全 
因此 ， 它 还 没有 达到 1946 年 世界 卫生 组织 (WHO ] 成 立时 在 它 的 诗 章 中 所 提 到 的 健康 概念 : “ 骨 康 乃 是 一 种 在 身体 上 ， 心理 上 和 社会 上 的 完满 状态 ， 而 不 保 保 是 二 六 下 芥 
没有 凑 寅 和 虚弱 的 状态 。" 【Health is a state of complete physical,mental and social well-being and not merely the absence of disease or intfirmity. } ee 
WHDO1948. 世 界 卫生 组织 关于 健康 的 这 一 定 尖 ,把 人 的 健康 从 生物 学 的 总 人 ， 术 展 到 了 精神 和 社会 关系 【社会 相互 影响 的 质量 ) 两 个 方面 的 健康 状态 ， eA 先天 
心 ， 杰 庭 和 社会 生活 的 健康 状 志 均 包 括 在 内 ， 要么 

雪 若 
绝技 信 六 7 严 
现代 健康 的 合 交 并 十 倪 是 传统 所 指 的 身体 没有 病 而 已 ， 根据“ 世界 卫生 组 织 ” 的 解 程 : 健康 坏 侵 指 一 个 人 身体 有 没有 出 现 疾 病 或 虚弱 现 繁 ， 而 是 指 区 : 
心理 上 和 社会 上 的 壳 好 状态 ， 这 就 是 现代 关于 健康 的 较为 壳 整 的 科学 概念 。 


日 雌 


图 7-41 文件 ex7.2.html 对 应 的 页 面 效果 


position 属性 


盒子 模型 的 概 念 和 作用 
width、height、border、padding 和 marsgin 属性 
display 属性 

float 属性 

clear 属性 

z-index 属性 


掌握 使 用 盒子 模型 来 设置 元 素 的 内 容 范 围 、| 
框 和 外 部 边 距 。 : 
掌握 使 用 display 属性 来 设置 元 素 的 块 级 或 内 联 
掌握 使 用 float 属性 来 设置 元 素 与 周围 元 素 之 间 的 浮 3 
掌握 使 用 z-index 属性 来 设置 多 个 位 置 重合 的 元 系 的 堆 党 
掌握 使 用 position 属性 来 设置 元 素 的 定位 方式 。 
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【工作 场景 


网 站 中 网 页 的 个 数 越 来 越 多 ， 网 页 中 元 系 的 个 数 也 越 来 越 多 。 昌 然 可 以 日 由 设置 各 元 
素 ， 但 是 各 元 系 在 网 页 上 的 位 置 设 置 也 越 来 越 复 杂 。 如 何 确定 各 元 素 在 网 页 上 的 位 置 ， 对 
于 网 页 效 末 的 完美 是 个 午 要 的 问题 。 

下 面 需要 制作 四 个 网 页 : 《电子 世界 网 站 弟 页 》《 焚 高 的 星空 》《 图 片 慷 》 和 《人 力 
资源 系统 》。 

【引号 问题 】 

(1) 上 怎 样 设置 各 元 系 目 里 的 大 小 及 边 距 ? 

(2) 怎样 设置 各 元 宁 与 周围 元 系 之 间 的 浮动 天 系 ? 

(3) 怎样 设置 位 置 重 登 的 多 个 元 聚 之 加 的 堆 登 关系? 

(4) 怎样 设置 各 元 系 的 定位 方式 ? 


A% 8.2 盒子 内 容 


在 设计 网 页 时 ， 对 网 页 中 各 个 元 系 进 行 布 局 是 非常 重要 的 内 容 ，CSS 使 用 了 盒子 模型 
来 描述 网 页 中 元 素 的 布局 。 使 用 div 进行 网 页 排版 是 现在 流行 的 方法 。<div> 标 签 是 一 个 块 
级 元 系 ， 可 以 把 HIML 文档 分 割 为 独 陈 的、 不 同 的 部 分 ， 往往 被 用 作 网 页 元 系 的 组 织 工具 。 
<div> 标 签 的 布局 思路 采用 了 盒子 模型 ,修改 <div> 标 签 的 属性 ， 如 文字 、 背 景 、 链接 、 边 框 、 
定位 和 可 视 性 , 惑 可 以 完成 网 页 中 元 素 的 目 由 排版 。 网 站 使 用 div+css 布局 使 得 代码 更 精 何 ， 
因为 同一 个 网 站 往往 有 多 个 风格 和 内 容 相 近 的 网 页 , 需要 调整 时 只 需要 修改 相应 的 css 文件 
即 可 。 使 用 div+css 布局 的 网 页 和 使 用 表格 布局 的 网 页 相 比 ， 页 面 代码 更 少 ， 而 且 不 会 因为 
浏览 器 不 同 而 导致 错位 。 采 用 div+css 布局 的 网 站 对 于 搜索 引擎 更 友好 ， 因 为 其 结构 化 的 代 
伺 更 有 利于 搜索 引擎 抓 取 。 

盒子 模型 如 同一 个 现实 生活 中 的 盒子 的 二 维 投影 ， 盒 于 里 面 有 盛 放 的 内 容 ， 盒 于 本 刁 
有 边框 ， 盛 放 的 内 容 和 边框 之 间 有 距离 ， 边 框 和 周围 的 东西 之 间 也 有 距离 。 每 个 HIML 元 
素 都 是 一 个 盒子 ， 它 有 外 边 距 、 边 框 、 内 边 距 和 内 容 四 个 属性 ， 如 图 8-1 所 示 。margin( 外 
边 距 ) 是 边框 外 的 区 域 ， 外 边 距 是 透明 的 ;border( 边 框 ) 是 围 统 在 内 边 距 和 内 容 外 的 边框 ; 
padding( 内 边 距 ) 是 内 容 周 围 的 区 域 ， 内 边 距 是 延明 的 ; content( 内 容 ) 是 盒子 的 内 容 ， 显 示 文 
本 和 图 像 。 

除了 内 容 (content)， 其 余 每 个 属性 都 可 分 为 四 边 : 上 下 左右 ; 这 四 部 分 可 同时 设置 ， 也 
可 分 别 设置 ， 如 图 8-2 所 示 。margin( 外 边 距 ) 分 为 margin-top( 上 外 边 距 )、margin-right( 右 外 
边 距 )、margin-bottom( 下 外 边 距 ) 和 margin-left( 左 外 边 距 )。border( 边 框 ) 分 为 border-top( 上 边 
框 )、border-right( 右 边框 )、border-bottom( 下 边框 ) 和 border-left( 左 边框 )。padding( 内 边 距 ) 分 
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为 padding-top( 上 内 边 距 )、padding-right( 右 内 边 距 )、padding-bottom( 下 内 边 距 ) 和 
padding-left( 左 内 边 距 )。 


content 


图 8-1 盒子 模型 
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图 8-2 分 别 设置 四 边 的 盒子 模型 


width 属性 设置 元 素 的 宽度 ，height 属性 设置 元 素 的 高 度 。width 属性 和 height 属性 可 以 
使 用 表 8-1 中 的 值 来 描述 。 


表 8-1 width 属性 和 height 属性 的 值 


值 摘 述 
auto 浏览 器 自动 计算 值 。 默 认 值 
leneth 使 用 px、cm 等 单位 定义 值 
0 设置 基于 包含 块 ( 父 元 素 ) 宽 度 的 百分比 值 
inherit 从 父 元 素 继承 


【实例 8.1】 设置 例子 模型 的 宽度 和 融 度 ， 文 件 名 称 为 chapter8.1.html， 内 容 如 下 : 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


<1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<Sstyle> 
diww :{ 
border: lpx solid black; 
margin: 10px; 
padding: 1l10px; 
} 
#d1iv]1 1 
width: auto; 
height: auto; 
} 
#d1liv2 1 
float: nones 
width: 300px; 
height: 250px; 
} 
#d1iv3 1 
width: 50%; 
height: 50%; 
} 
</style> 
<tit1le> 设 置 盒子 模型 的 宽度 和 高 度 </tit1le> 
</head> 
<body> 
<dlv lid=divi1> 
<1img src="image/darkgray.Jpg" /> 
</div> 
<dlyv ld=div2> 
<1img src="image/darkgray.Jpg" /> 
</div> 
<dly id—d1iv3> 
<1img src="image/darkgray.Jpg™" /> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.1.html， 页 面 效 果 如 图 8-3 所 示 ， 可 以 看 到 设置 盒子 
模型 的 宽度 和 高 度 的 效果 。 底 部 图 上 乒 的 边框 的 总 宽度 会 随 独 浏览 秀 窗 口 的 大 小 而 变化 。 

设置 一 个 HTML 元 素 的 宽度 和 高 度 属性 只 是 设置 其 内 容 区 域 的 宽度 和 高 度 。 如 果 需 要 
对 该 HIML 元 系 设 置 完整 布局 ， 还 必须 添加 填充 、 边 框 和 边 距 的 设置 。 最 终 元 系 的 总 宽度 
计算 公式 是 这 样 的 : 

元 素 的 总 宽度 = 宽度 + 左 内 边 距 + 右 内 边 距 + 左边 框 + 右边 框 + 左 外 边 距 + 右 外 边 距 

元 素 的 总 高 度 最 终 计 算 公 式 是 这 样 的 : 

元 素 的 总 高 度 = 高度 + 上 内 边 距 + 下 内 边 距 + 上 边框 + 下 边框 + 上 外 边 距 + 下 外 边 距 
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四 设 晤 总 子 梳 弄 的 安 脏 和 0 襄 府 x 二 


写 全 127.0.0.1:020/HTML5W%2bC553W%2bJavascript 网 页 设计 实用 数 程 /安全 / 第 8 齐 /chapter8.1.html? hbt=1531836498368 


图 8-3 ”设置 盒子 模型 的 宽度 和 高 度 的 页 面 效 果 
【实例 8.2】 计 算 元 双 的 总 宽度 ， 文 件 名 称 为 chapter8.2.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<style> 
div 1 
width: 280px; 
padding: Spx; 
border: 5px Sollid gray; 
margin: Opx; 
} 
</style> 
<title> 计 算 元 素 的 总 宽度 </title> 
</head> 
<body> 
<Img src—"image/star.Jpg" width="300px" height="200px"> 
<d1lv> 
图 片 的 宽度 是 300px，diyv 的 宽度 是 280px， 内 边 距 是 5px， 边 框 是 5px， 外 边 距 
是 0px。 
</d1ivV> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.2.html， 页 面 效 果 如 图 8-4 所 示 ， 可 以 看 到 图 片 的 宽 
度 和 div 元 素 的 总 的 宽度 一 样 的 效果 。 
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| 计算 元 素 的 总 完 度 x 十 


心 人 127.0.0.1:8020/ 第 8 章 /chapter8.2.html? hbt=1553243986405 


\ 图 片 的 宽度 是 300pX，div 的 宽度 是 
280px， 内 边 距 是 5px， 边 框 是 5px， 外 
边 距 是 0px。 
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AS 8.3 盒子 边框 


盒子 边框 (border) 是 例子 模型 中 围绕 内 容 和 内 边 距 的 一 条 或 多 条 线 。 使 用 CSS 边框 属 
性 ， 可 以 指定 盒子 边框 的 样式 、 宽 度 以 及 颜色 。 边 框 会 受到 盒子 的 背景 颜色 影 啊 。 
border-style 属性 设置 边框 的 样式 。border-style 属性 可 以 使 用 表 8-2 中 的 值 来 摘 述 。 


表 8-2 border-style 属性 的 值 


值 摘 述 
none 设置 为 无 边框 
hidder 和 none 效果 一 样 
dotted 设置 为 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 
dashed 设置 为 虚线 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 
solid 设置 为 实 线 边框。 宽度 等 于 border-width 的 值 
double 设置 为 双 线 边框 
5TOOVE 设置 为 3D 凹 槽 状 边框 
ridge 设置 为 3D 垄 状 边框 
inset 设置 为 3D 内 翌 式 边框 
outset 设置 为 3D 外 镶 式 边框 
inherit 从 父 元 素 继承 


border-width 属性 设置 边框 宽度 。border-width 属性 可 以 使 用 表 8-3 中 的 值 来 描述 。 
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值 描述 
thin 设置 为 细 边 框 
medium 设置 为 中 等 边框 。 默 认 值 
thick 设置 为 粗 边框 
lensgth 设置 边框 的 宽度 值 
Inherlt 从 父 元 系 继 检 


border-color 属性 设置 边框 颜色 。border-color 属性 可 以 使 用 表 8-4 中 的 值 类 型 来 描述 。 
表 8-4 border-color 属性 的 值 


值 摘 述 
color name 颜色 值 为 颜色 名 称 
hex number 闫 色 值 为 十 六 进 制 值 的 颜色 
reb number 颜色 值 为 RGB 代码 的 颜色 
transparent 设置 边框 颜色 是 透明 的 。 默 认 值 
inherit 从 父 元 紊 继承 


在 实际 中 ， 往 往 使 用 border 属性 来 设置 所 有 的 边框 属性 ， 设 置 的 顺 友 是 border-width、 
border-style 和 border-color， 如 果 缺 少 任意 属性 也 没有 关系。 

盒子 模型 的 边框 属性 可 以 分 为 四 边 来 分 别 设置 其 样式 、 客 度 和 闫 色 ， 按 上 右 下 左 的 设 
置 顺序 ， 对 应 的 属性 分 别 是 border-top、border-right、border-bottom 和 border-left， 每 边 的 设 
置 和 border 属性 的 设置 方法 一 样 。 当 然 也 可 以 单独 设置 单 边 的 样式 、 宽 度 和 颜色 ， 如 对 右 
边框 可 以 使 用 border-right-style、border-right-width 和 border-right-color 来 分 别 设 置 右边 框 的 
样式 、 和 宽度 和 闫 色 。 

【实例 8.3】 设 置 盒子 模型 的 边框 ， 文 件 名 称 为 chapter8.3.html， 内 容 如 下 : 


<1DOCTYPE 了 tml> 


<html> 
<head> 
<meta charset="UTF-8"> 
<Style> 


di {f 
width: 150pxs; 
height: l100px; 
margin: 1]0pxs 
padding: 1l0px; 


} 
imd { 
width: 130px; 
height: 90px; 
} 
#d1ivl1 1 
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border-—style: dashed; 
border-width: medium; 


border—color: red: 


} 
#d1iVv2 1 
border: lpx so11d black; 
} 
#d1iv3 1 
border—left: JpxX dotted orange; 
border-rl1ght-style: groove; 
border—-right—width: Spx; 
border-—right-color: darkcyan; 
} 
</style> 
<title> 设 置 盒子 模型 的 边框 </title> 
</head> 
<body> 


<d1V ld=div1> 
<1img src="image/darkgray.Jpg" /> 
</div> 
<dliv id—d1iv2> 
<img src="image/darkgray.]Jpg" /> 
</div> 
<d1LV ld=div3> 
<1img src="image/darkgray.Jpg™" /> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.3.html， 页 面 效 果 如 图 8-5 所 示 ， 可 以 看 到 盒子 模型 
的 边框 不 同 的 效 末 。 
| wer x 


GG 加 12700.18020/ 第 8 章 /chaptierg.3.html? hbt=1553244057549 古 各 


8-5 设置 盒子 模型 的 边框 的 页 面 效 果 
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“8.4 盒子 内 边 距 


盒子 内 边 距 (padding) 属 性 是 指 盒子 模型 中 内 容 (content) 与 边框 (border) 之 间 的 空间 , 它 清 
除 内 容 (contenb 周 围 的 区 域 ， 会 受到 边框 中 填充 的 背景 赢 色 的 影响 。padding 属性 设置 盒子 
模型 的 内 边 距 。padding 属性 可 以 使 用 表 8-5 中 的 值 来 摘 述 。 


表 8-5 padding 属性 的 值 


值 摘 ” 述 
leneth 设置 为 一 个 固定 值 。 默 认 值 是 0px 
0 设置 为 一 个 百分比 值 
inherit 从 父 元 素 继 承 


padding 属性 和 margin 属性 不 同 ， 不 允许 取 负 值 。 如 果 padding 值 是 百分数 ， 那 么 实际 
距离 会 根据 父 元 素 的 宽度 来 计算 百分比 得 到 最 终结 果 。 
盒子 模型 可 以 分 为 四 边 来 分 别 设 置 其 内 边 距 ， 按 上 右 下 左 的 顺序 ， 对 应 的 属性 分 别 是 
padding-top、padding-right、padding-bottom 和 padding-left。 也 可 以 使 用 padding 属性 来 设置 
所 有 的 内 边 距 ， 对 应 设置 的 内 边 距 的 顺序 是 上 右 下 左 。padding 属性 取 值 是 一 个 到 四 个 值 。 
padding 属性 如 果 有 一 个 值 ， 那 么 该 值 是 对 应 四 边 的 内 边 距 ， 如 果 有 两 个 值 ， 那 么 第 一 个 值 
是 上 内 边 距 和 下 内 边 距 ， 第 二 个 值 是 左 内 边 距 和 右 内 边 距 ; 如 果 有 三 个 值 ， 那 么 第 一 个 值 
是 上 内 边 距 ， 第 二 个 值 是 左 内 边 距 和 右 内 边 距 ， 第 三 个 值 是 下 内 边 距 : 如 果 有 四 个 值 ， 那 
么 按 顺 序 依次 是 上 内 边 距 、 右 内 边 距 、 下 内 按 跑 和 左 内 边 距 。 
【实例 8.4】 设 置 盒子 模型 的 内 边 距 ， 文 件 名 称 为 chapter8.4.html， 内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<meta charset=—="UTF 8"»> 
本 让 于 二 > 
div 1 
width: 150px; 
height: ll00px; 
margirnie 10pas 
border: lpx solid black; 


} 
img 1 
width: 130px; 
height: 90px; 
} 
着 QIV1 1 
padding: Spx; 
} 
#d1liv2 1 


padding: Spx 8px; 
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} 
#d1liv3 1 
padding: lO0Opx Spx 3px 7PX; 
} 
过 号 七 并 全 > 
<title> 设 置 盒子 模型 的 内 边 距 </title> 
</head> 


<body> 
< 1id=divi> 
<1img src="image/darkgray.Jpg™" /> 
TAs 
<d1V lid=div2> 
<img src="image/darkgray.]Jpg" /> 
</dliv> 
< 人 1 id—d1iv3> 
<img src="image/darkgray.]Jpg" /> 


< div> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter8.4.html， 页 面 效 果 如 图 8-6 所 示 ， 可 以 看 到 盒子 模型 
的 内 边 距 不 同 的 效果 。 


中 设置 合子 模型 的 内 边 路 x 十 
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8-6 设置 盒子 模型 的 内 边 距 的 页 面 效果 


Sa 8.5 盒子 外 边 距 


盒子 外 边 距 (marsgim) 属 性 是 指 盒子 模型 中 盒子 边框 (bordenD 周 围 的 空间 ， 它 清除 边框 区 
域 ， 没 有 背景 疝 色 ， 完 全 透明 。margin 属性 设置 例子 模型 的 外 边 距 。margin 属性 可 以 使 用 
表 8-6 中 的 值 来 摘 述 。 
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表 8-6 margin 属性 的 值 


值 描述 
auto 由 浏 哆 名 讽 站 
length 设置 为 一 个 固定 值 。 默 认 值 是 0px 
% 设置 为 一 个 百分比 值 
inherit 从 父 元 素 继承 


margin 属性 和 padding 属性 不 同 ,可 以 取 负 值 。margin 清除 元 了 系 周围 的 区 域 ， 且 没有 背 
景 颜色 ， 是 透明 的 。 

盒子 模型 可 以 分 为 四 边 来 分 别 设置 其 外 边 距 ， 按 上 右 下 堪 的 顺序 ， 对 应 的 属性 分 别 是 
margin-top、margin-right、margin-bottom 和 maregin-left。 也 可 以 使 用 maregin 属性 来 设置 所 有 
的 外 边 距 ， 对 应 设置 的 外 边 距 的 顺 友 是 上 右 下 左 。margin 属性 取信 是 一 个 到 四 个 值 。margin 
属性 如 果 有 一 个 仁 ， 那 么 该 值 是 对 应 四 边 的 外 边 距 :; 如 果 有 两 个 仁 ， 那 么 第 一 个 值 是 上 外 
边 距 和 下 外 边 距 ， 第 二 个 全 是 堪 外 边 距 和 右 外 按 距 :; 如 果 有 三 个 什 ， 那 么 第 一 个 值 是 上 外 
边 距 ， 第 二 个 值 是 左 外 边 距 和 右 外 边 距 ， 第 三 个 值 是 下 外 边 距 ;如 果 有 四 个 什 ， 那 么 按 顺 
序 依次 是 上 外 边 距 、 右 外 边 距 、 下 外 边 距 和 无 外 边 距 。 

【实例 8.5】 设置 盒子 模型 的 外 边 距 ， 文 件 名 称 为 chapter8.5.html， 内 容 如 下 : 


<1DOCTYPE html > 
<html> 
<head> 
<meta charset="UTF-—8"»> 
“Style> 
di { 
width: 130px; 
height: 90px; 
border: lpx solidqd black; 


padding :5px; 
} 
imty { 
width: 130px; 
height: 90px; 
} 
#d1V1 1 
margin: px; 
} 
#d1liVv2 1 
mrgin: Sp Spx THX 20pX; 
} 
#d1iv3 1 
margin: —30px —5px; 
} 
</style> 
<title> 设 置 盒子 模型 的 外 边 距 </title> 
</head> 
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<body> 
<diy lid=d1iv1> 
<1img src="image/darkgray.Jpg" /> 
</div> 
<div 1d=div2> 
<1mg src="image/darkgray.Jpg" /> 
</div> 
<div id=div3> 
<1img src="image/darkgray.Jpg" /> 
</jd1iv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.5.html， 页 面 效 果 如 图 8-7 所 示 ， 下 Te 
外 边 距 不 同 的 效果 。 第 三 个 盒子 因为 其 margin 属性 的 两 个 值 为 负数 ， 导 致 其 与 第 二 个 盒 
相 重 有 登 。 
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图 8-7 ”设置 盒子 模型 的 外 边 中 的 页 面 效果 


“8.6 设置 元 素 浮 动 


8.6.1 文档 流 


display 属性 用 来 设置 元 素 如 何 显 示 。display 属性 可 以 使 用 表 8-7 中 的 值 来 描述 。 

所 谓 的 块 元 素 是 指 该 元 素 在 显示 时 前 后 需要 换行 ， 而 内 联 元 兹 不 强制 换行 ， 可 以 和 其 
他 元 素 同 处 一 行 中 。 常 见 的 块 元素 有 <p> 和 <div>， 和 常见 的 内 联 元 素 有 <span> 和 <a>。 如 果 需 
要 设置 茶 个 元 素 为 块 元 素 ， 只 要 设置 其 display 属性 值 为 block 即 可 ;如 果 需 要 设置 菏 个 元 
素 为 内 联 元 素 ， 只 要 设置 其 display 属性 值 为 inline 即 可 ;， 如果 需 要 隐藏 某 个 元 素 ， 只 要 设 
置 其 display 属性 值 为 none 即 可 ， 那 么 该 元 际 不 但 不 可 见 ， 而 且 不 占用 页 面 任何 空间 。 


none 

block 

inline 
inline-block 
list-item 
run-n 
table 
inline-table 


table-row-eroup 


table-header-eroup 


table-footer-erou 


table-row 


table-column-eroup 


table-column 
table-cell 
table-caption 


inherit 
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表 8-7 display 属性 的 值 


摘 述 
设置 元 素 不 显示 
设置 元 素 显示 为 块 级 元 素 ， 前 后 带 有 换行 符 


设置 元 素 显 示 为 内 联 元 素 ， 前 后 没有 换行 符 。 默 认 值 
设置 元 素 显 示 为 行内 块 元 素 

设置 元 素 显示 为 列表 

设置 元 素 根据 上 下 文 作为 块 级 元 素 或 内 联 元 素 显 示 
设置 元 素 显 示 为 块 级 表格 ， 前 后 带 有 换行 符 

设置 元 素 显 示 为 内 联 表 格 ， 前 后 没有 换行 符 

设置 元 素 显 示 为 一 个 或 多 个 行 的 分 组 ， 类 似 <tbody> 
设置 元 素 显 示 为 一 个 或 多 个 行 的 分 组 ， 类 似 <thead> 
设置 元 素 显 示 为 一 个 或 多 个 行 的 分 组 ， 类 似 <tfoot> 
设置 元 素 显示 为 一 个 表格 行 ， 类 似 <tr> 

设置 元 素 显 示 为 一 个 或 多 个 列 的 分 组 ， 类 似 <colgroup> 
设置 元 素 显 示 为 一 个 表格 列 ， 类 似 <col> 

设置 元 素 显 示 为 一 个 表格 单元 格 ， 类 似 <td> 和 <th> 
设置 元 素 显 示 为 一 个 表格 标题 ， 类 似 <caption> 

从 父 元 素 继承 


【实例 8.6】 设 置 文档 流 ， 文 件 名 称 为 chapter8.6.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 


<head> 
<meta charset="UTF-—8"™"»> 


<Style> 
div 


{ 

width: 130px; 

height: 90px; 

1px Sol1d black: 
padding: SpXx; 


border: 


margin: 5PX; 


} 
img { 
width: 100px; 
height: 80px; 
} 
#d1vV1 1 
display: none; 
} 
#d1V2 1 
display: block:; 
} 
#d1v3 1 
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display: inline; 
} 
#d1v4 1 
display: inline-block; 

} 
</style> 
<title> 设 置 文档 流 </title> 

</head> 
<body> 

这 里 古 第 一 张 图 片 。 
<dlv id=divl1> 

<1img src="image/darkgray.Jpg" /> 
<AGTV> 
这 里 是 第 二 张 图 片 。 
过 加 三 1d—01v2> 

<img src="image/darkgray.]Jpg" /> 
</div> 
这 里 是 第 三 张 图 片 。 
<dLV ld=div3> 

<1md src="image/darkgray.Jpg™" /> 
GTW> 
这 里 是 第 四 张 图 片 。 
<d1V ld=div4> 

<img src="image/darkgray.Jpg" /> 


</d1iv> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter8.6.html， 页 面 效 果 如 图 8-8 所 示 ， 可 以 看 到 设置 


display 属性 的 不 同 效果 。 第 一 个 盒子 的 display 属性 设置 为 none， 因 此 不 可 见 。 虽 然 四 张 图 
片 都 安放 在 div 中 ， 但 第 二 个 盒子 的 display 属性 设置 为 block， 图 片 显 示 在 单独 一 行 中 ; 第 
三 个 盒子 的 display 属性 设置 为 inline，div 边框 未 将 图 片 包含 在 内 ; 第 四 个 盒子 的 div 属性 
设置 为 mline-block， 虽 然 仍 呈现 内 联 特 性 ， 但 div 边框 将 图 片 包 含 在 内 。 
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这 里 是 第 一 张 图 片 。 这 里 是 第 二 张 图 片 。 


这 里 是 第 三 张 图 片 。 这 里 是 第 四 张 图 片 。 a 
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8.6.2 浮动 布局 


网 页 上 排列 的 多 个 HTML 元 素 束 是 多 个 盒子 模型 ,它们 彼此 之 则 的 布局 关系 错 综 复 洲 。 
可 以 设置 元 系 的 浮动 来 使 得 元 素 同 左 或 同 右 移动 ， 守 至 周围 的 元 系 午 新 排列 。 

float 属性 往往 用 于 图 像 ， 定 义 元 素 的 浮动 。 浮 动 的 元 素 会 生成 一 个 块 级 框 ， 直 到 该 块 
级 框 的 外 边 缘 人 磁 到 包含 框 或 者 其 他 的 浮动 框 为 止 。float 属性 可 以 使 用 表 8-8 中 的 值 来 插 述 。 


表 8-8 float 属性 的 值 


值 摘 “” 述 
left 设置 元 素 问 左 浮动 
right 设置 元 素 同 右 浮动 
none 设置 元 素 不 浮动 ， 按 照 文件 中 给 定 的 位 置 显 示 。 默 认 值 
inherit 从 父 元 素 继承 

元 象 的 浮动 是 指 元 素 在 页 面 上 左右 移动 ， 浮 动 元 兹 会 在 页 面 上 尽量 回 左 或 回 右 移动 ， 
直 全 其 外 边缘 页 到 包含 框 或 男 一 个 浮动 框 的 边框 为 止 。 浮动 元 系 之 前 的 元 系 不 会 受到 影响 ， 
浮动 元 系 之 后 的 元 系 会 围绕 浮动 元 素 。 如 果 元 系 是 绝对 定位 ， 那 么 float 属性 不 起 作用 。 


【实例 8.7】 设 置 浮动 布局 ， 文 件 名 称 为 chapter8.7.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
Styles 


div 1{ 
border: px solid black; 
padding: Spx; 
margin: 5PX; 


} 
im 4 
width: 100px; 
height: 80px; 
} 
#imgl] { 
float: nones 
} 
#img2 { 
Toatkts .eeks 
} 
#1imgaq3 1 
fioat= right> 
} 
</style> 


<title> 人 设置 溯 动 布局 </title> 
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</head> 

<body> 
这 里 是 第 一 组 图 片 。 
<dliv> 


<1img src="image/star.Jpg" /> 
<1mg lid=imgl] src="image/darkgray.Jpg" /> 
<1img src="image/star.Jpg" /> 


</divy> 
这 里 是 第 二 组 图 片 。 
<d1liv> 


<1mg src="image/star.Jpg™" /> 
<1img 1i1d=img2 src="image/darkgray.]Jpg" /> 
<1img src="image/star.Jpg™" /> 


<fdivy> 
这 里 是 第 三 组 图 片 。 
<dlV> 


<img src="image/star.Jpg" /> 
<1img 1d=img3 src="image/darkgray.]Jpg™" /> 
<1img src="image/star.Jpg" /> 
下 > 
</bpodqy> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.7.html， 页 面 效 果 如 图 8-9 所 示 ， 可 以 看 到 浮动 布局 
不 同 的 效果 。 尽 官 三 个 div 中 的 三 张 图 片 顺 序 一 样 ,但 显示 效果 不 一 样 ， 这 是 因为 中 间 的 图 
片 使 用 的 float 属性 值 不 一 样 ， 分 别 是 none、left 和 right， 因 此 只 有 第 一 个 div 中 的 图 片 顺 
序 不 变 ， 而 其 他 两 个 div 中 ， 中 间 的 图 请 分别 显示 在 左边 和 右边 。 
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8.6.3 ”清除 浮动 


如 果 需 要 清除 页 面 当前 已 设置 的 元 素 浮动 方式 , 可 以 使 用 clear 属性 。clear 属性 指定 段 
落 的 左 侧 或 右 侧 不 允许 浮动 元 素 。clear 属性 可 以 使 用 表 8-9 中 的 值 来 描述 。 


表 8-9 clear 属性 的 值 


值 描 述 
left 设置 左 侧 不 允许 浮动 元 素 
right 设置 右 侧 不 允许 浮动 元 素 
both 设置 两 侧 都 不 允许 浮动 元 素 
none 设置 两 侧 允 许 浮动 元 素 出 现 。 默 认 值 
inherit 从 父 元 素 继承 


【实例 8.8】 设 置 清除 浮动 ， 文 件 名 称 为 chapter8.8.html， 内 容 如 下 : 


<1DOCTYPE html>» 


<html> 
<head> 
<meta charset="UTF—8"> 
<Sstyle> 
div { 
border: lpx S01l1d black; 
padding: SpXx; 
margin: SpxXx; 
} 
img 1 
width: 100px; 
height: 80px; 
float: left,; 
} 
#imgl] { 
tioats Tetts 
} 
#img2 1 
lears De: 
} 
</style> 
<title> 设 置 清 除 浮 动 </title> 
</head> 
<body> 


<h3> 这 里 是 第 一 组 图 片 。</h3> 

<img id=imgl src="image/star.Jpg" /> 
<img 1id=1imgl1 src="image/darkgray.Jpg" /> 
<h3> 这 里 是 第 二 组 图 片 。</h3> 


<img id=img2 src="image/star.Jpg" /> 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


<img 1id=img2 src="image/darkgray.Jpg" /> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter8.8.html, 页 面 效 果 如 图 8-10 所 示 , 可 以 看 到 清除 浮动 
的 效果 。 第 一 组 中 的 两 张 图 片 是 水 平 排列 的 ,这 是 因为 float 属性 值 是 left， 第 二 组 中 的 两 张 
图 片 是 垂直 排列 的 ， 这 是 因为 clear 属性 值 是 both， 图 片 两 侧 均 不 允许 有 浮动 元 素 出 现 。 


上 设置 青 除 浮动 | 
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这 里 是 第 二 组 图 片 。 


图 8-10 设置 清除 浮动 的 页 面 效 果 


症 层 鸽 顺 序 


wl 


页 面 上 有 多 个 元 素 位 置 重 登 时 ， 可 以 使 用 z-index 属性 设置 元 紊 的 层 闭 顺序 。z-index 属 
性 可 以 使 用 表 8-10 中 的 值 来 描述 。 
表 8-10 z-index 属性 的 值 


值 摘 _ 述 
auto 设置 层 登 顺序 与 父 元 素 相 同 。 默 认 值 
number 设置 元 素 的 层 登 序号 
inherit 从 父 元 系 继 承 


【实例 8.9】 设 置 层 登 顺 序 ， 文 件 名 称 为 chapter8.9.html， 内 容 如 下 : 


<1DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<Sstyle> 
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diw :{ 
border: JpX solid Black: 
padding: SpxXx; 


margin: 5PX; 


} 

Tm 4{ 
width: 300px; 
height: 200px; 

} 

#imagl { 
position: absolute; 
left: Opx; 
top: Opx; 
zd = 

} 

#1img2 { 
position: absolute; 
eft: JOpXr 
top: 20px; 
z-index: 0; 

} 

#img3 1 
position: absolute; 
efts L100 
top: l100px; 
过 = 了 EX 1s 

} 

</style> 
<tit1le> 设 置 层 登 顺序 </title> 
</head> 


<body> 
<img id=imgl src="image/food.Jpg" /> 
<p> 这 里 显示 了 第 一 段 文字 。</p> 
<img 1id=img2 src="image/darkgray.Jpg" /> 
<p> 这 里 显示 了 第 二 段 文 字 。</p> 
<img ld=img3 src="image/star.jJpg" /> 
<p> 这 里 显示 了 第 三 段 文 字 。</p> 

</body> 

</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.9.html,， 页 面 效 果 如 图 8-11 所 示 , 可 以 看 到 设置 层 登 
顺序 的 效果 。 三 张 图 片 按 照 z-index 属性 值 由 低 到 融 的 顺序 依 人 次 车 加 显示 。 最 下 层 的 图 片 因 
为 z-index 属性 值 为 -1， 使 得 文字 登 加 在 该 图 片上 。 
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图 8-11 设置 层 色 顺序 的 页 面 效 果 


AS 8.8 设置 元 素 定位 


对 网 页 中 的 元 素 定 位 是 网 页 设计 中 的 重要 工作 。CSS 定位 属性 可 以 用 来 对 网 页 中 的 元 
际 定 位 ， 指 定 两 个 元 际 的 相对 位 置 ， 也 可 以 指定 元 素 中 内 容 超 出 范围 时 的 处 理 方法 。 

CSS 属性 中 ，top 属性 用 来 设置 元 素 上 外 边 中 边界 与 其 包含 块 上 边界 之 则 的 偏 移 ，right 
属性 用 来 设置 元 系 右 外 边 距 边界 与 其 包含 块 右边 界 之 间 的 俩 移 ，bottom 属性 用 来 设置 元 系 
下 外 边 距 边界 与 其 包含 块 下 边界 之 间 的 偏 移 ，left 属性 用 来 设置 元 素 左 外 边 距 边界 与 其 包含 
块 左边 界 之 间 的 偏 移 ，z-index 属性 用 来 设置 元 素 的 堆 准 顺 友 ，position 属性 用 来 设置 元 素 的 
定位 类 型 。position 属性 可 以 使 用 表 8-11 中 的 值 来 摘 述 。 


表 8-11 position 属性 的 值 
值 摘 述 
设置 元 素 绝对 定位 ,相当 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 ,元 素 的 位 置 通过 top、 


Ee right、bottom 和 left 属性 进行 设置 

二 设置 元 素 绝对 定位 ， 相 当 于 浏览 器 窗口 进行 定位 。 元 素 的 位 置 通过 top、right、bottom 和 
left 属性 进行 设置 

二 设置 元 素 相对 定位 ， 相 当 于 其 正常 位 置 进行 定位 。 元 素 的 top、right、bottom 和 left 属性 


作为 其 位 置 的 偏 移 值 进行 设置 
static 设置 元 素 无 定位 ， 以 正常 的 流 形 式 显示 。top、right、bottom、left 和 z-index 属性 无 作用 
inherit 从 父 元 素 继承 
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8.8.1 相对 定位 


position 属性 值 为 relative 时 ， 元 系 定 位 及 用 相对 定位 方式 ， 其 实际 位 置 将 为 其 原始 位 
置 与 top、right、bottom 和 left 属性 值 相 加 的 结果 。top、right、bottom 和 left 属性 值 作为 偏 
移 值 来 处 理 ， 可 以 取 人 负 值 。 元 了 素 使 用 相对 定位 导致 位 移 发 生变 化 时 ， 其 原始 位 置 所 占 空间 
仍 保留 。 

【实例 8.10】 设 置 相 对 定位 ， 文 件 名 称 为 chapter8.10.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-—8"> 
<Sstyle> 
晤 工 站 法 
position: absolute; 
border: px solid black; 
padding: Spx; 
margin: 5PX; 
} 
img 1 
width: 100px; 
height: 80px; 
} 
#imagl] { 
position: relatives 
top: J20px; 
right: SOpx; 
} 
#img3 { 
position: relatives 
bottom: SO0px; 
left: J0px; 
} 
</style> 
<title> 设 置 相对 定位 </title> 
</head> 
<body> 


<div style="Left: SOpx;top: SOpx; "> 
<1img src="image/star.Jpg" /> 
<1img 1id=imgl src="image/darkgray.]Jpg" /> 
<1mg src="image/star.Jpg™" /> 
</d1iv> 
lv Styvie="1ieft: 200px:top: 2000x7 "> 
<img src="image/star.Jpg" /> 
<1img src="image/darkgray.Jpg" /> 
<1img src="image/star.Jpg" /> 
</div> 
<div style="Left: 350px;top: 350px;"> 
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<img src="image/star.Jpg" /> 
<1img 1d=img3 src="image/darkgray.]Jpg" /> 
<1img src="image/star.Jpg" /> 
</d1lv> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter8.10.html， 页 面 效 果 如 图 8-12 所 示 ， 可 以 看 到 相对 定 
位 的 效果 。 第 二 组 图 片 为 正常 效果 的 图 片 ， 第 一 组 和 第 三 组 中 间 的 图 片 位 置 都 友 生 了 偏 移 ， 
第 一 组 的 偶 移 方 问 是 左下 方 , 第 三 组 的 偏 移 方 回 是 右上 方 , 但 图 片 原始 位 置 所 占 空间 仍 保留 。 


十 


图 8-12 设置 相对 定位 的 页 面 效 果 


8.8.2 绝对 定位 


position 属性 值 为 absolute 时 ， 元 系 定 位 采用 基于 父 元 素 的 绝对 定位 方式 ， 其 实际 位 置 
将 根据 已 定位 的 父 元 素 与 top、right、bottom 和 left 属性 值 相 加 来 确定 。 如 果 元 素 没 有 已 定 
位 的 父 元 素 ， 那 么 其 位 置 则 根据 <html> 来 确定 。 元 兹 使 用 绝对 定位 导致 位 移 帮 生变 化 时 ， 
其 原始 位 置 所 占 空间 不 保留 。 
【实例 8.11】 设 置 基 于 父 元 素 的 绝对 定位 ， 文 件 名 称 为 chapter8.11.html， 内 容 如 下 : 


<1DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-—8"> 
<stlyle> 
div 1{ 
position: absolute; 
border: px solid black; 
padding: SpX; 
ee dee ete 


和 第 8 章 CSS 的 盒子 模型 


margin: 5PX; 


} 
img 1 
width: 1l100px; 
height: 80px; 
} 
#imgl { 
position: absolute:; 
Lop: J0px; 
rights Spx» 
} 
#img3 1 
position: absolute; 
bottom: SO0px; 
left: SOpzxs 
} 
</style> 
<title> 设 置 基 于 父 元 素 的 绝对 定位 </title> 
</head> 


<body> 
<dlyv style="left: 50px;top: 5OpXx; "> 
<1mg src="image/star.Jpg™" /> 
<1img 1d=imgl src="image/darkgray.Jpg™" /> 
<1img src="image/star.Jpg" /> 
</div> 
< style="Left: 200pxrtop: 2D00px; "> 
<1img src="image/star.Jpg" /> 
<1img src="image/darkgray.Jpg" /> 
<1img src="image/star.Jpg" /> 
</d1liv> 
<div style="Left: 350px;top: 350px: "> 
<1img src="image/star.Jpg" /> 
<1img 1d=img3 src="image/darkgray.Jpg" /> 
<1img src="image/star.Jpg" /> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter8.11.html， 页 面 效果 如 图 8-13 所 示 ， 可 以 看 到 基于 父 
元 素 的 绝对 定位 的 效果 。 第 二 组 图 片 为 正常 效果 的 图 片 ， 第 一 组 和 第 三 组 中 间 的 图 片 位 置 
都 发生 了 偏 移 ， 其 位 置 是 根据 所 在 的 div 位 置 与 位 移 相 合 加 而 得 到 ， 图 上 厂 原 始 位 置 所 占 空间 
不 你 留 。 

position 属性 值 为 fixed 时 ， 元 系 定 位 采用 基于 浏 贤 器 窗口 的 绝对 定位 方式 ， 其 实际 位 
置 将 根据 浏览 器 窗口 与 top、risht、bottom 和 left 属性 值 相 加 来 确定 。 元 素 使 用 相对 定位 导 
致 位 移 友 生变 化 时 ， 其 原始 位 置 所 占 空 间 仍 傈 留 。 
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六 设置 基于 父 元 素 的 弟 对 定位 “| 十 


尼 127.0.0.1:80207HTML5%2bCS533%62bjJavascript 网 页 设计 空 用 教程 /实例 /第 8 章 /chapter8..。 让 合 


图 8-13 ”设置 基于 父 元 素 的 绝对 定位 的 页 面 效 果 
【实例 8.12 设置 基于 浏览 器 窗口 的 绝对 定位 , 文件 名 称 为 chapter8.12.html， 内容 如 下 : 


<lIDOCTYPE html> 


<html> 
<head> 
<meta charset=—="UTF-— 8"> 
<Sstyle> 
div :{ 
position: absolute; 
border: lpx solid black; 
padding: Spx; 
margin: SpxXx; 
} 
Tm 
width: 100px; 
height: 80px; 
} 
#imgl 1 
position: fixed; 
top: 20px; 
-hi 5H 
} 
#imgq3 { 
position: fixed; 
bottom: SO0px; 
Teft:s sOpxs 
} 
</style> 
<title> 设 置 基 于 浏览 器 的 绝对 定位 </title> 
</head> 
<body> 


<diy style="left: SQOpx;top: SOpx; "> 
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<1mg src="image/star.Jpg" /> 
<1img 1i1d=imgl src="image/darkgray.]Jpg" /> 
<1img src="image/star.Jpg" /> 

</div> 

< 3SLY]e=”" lett 200px;top: 200Px> "> 
<1md src="image/star.Jpg" /> 
<1img src="image/darkgray.Jpg™" /> 
<1img src="image/star.Jpg" /> 

过 GT 六 

<aAdiv stvice "Leftt: 350DxLep: 3500x7™> 
<1img src="image/star.Jpg" /> 
<img 1i1d=img3 src="image/darkgray.Jpg™" /> 
<img src="image/star.Jpg" /> 

</div> 

</body> 


在 浏览 器 中 打开 网 页 文件 chapter8.12.html， 页 面 效 果 如 图 8-14 所 示 ， 可 以 看 到 基于 浏 
斋 豆 窗口 的 绝对 定位 的 效果 。 第 二 组 图 睛 为 正 钊 效果 的 图 乒 ， 第 一 组 和 第 三 组 中 间 的 图 卢 
位 置 都 友 生 了 偏 移 ， 其 位 置 是 根据 浏 贤 器 与 位 移 相 又 加 和 而 得 到 ， 图 片 原 始 位 置 所 占 空间 不 
保留 。 


六 设 嘻 基于 浏览 器 的 兆 对 定位 x | 十 


四 加 127.0.0.1:8020/HTML5%2bC553%2bJavaScript 网 页 设计 实用 教程 /实例 /第 8 齐 /chapter8...， 夺 但 


图 8-14 设置 基于 浏览 器 的 绝对 定位 的 页 面 效 果 


8.8.3 无 定位 


position 属性 值 为 static 时 ， 元 素 定 位 采用 无 定位 方式 ， 其 实际 位 置 将 按照 文档 流 方 式 
处 理 ，top、right、bottom、left 和 z-index 属性 不 起 作用 。 
【实例 8.13】 设 置 无 定位 ， 文 件 名 称 为 chapter8.13.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<Sstyle> 
div 1{ 
position: absolute; 
border: lpx solid black; 
padding: Spx; 
myini: opXs 
} 
imd { 
width: 100px; 
height: 80px; 
} 
#imagl] 1 
position: static; 
top: 20px; 
rghts SO 
} 
#img3 1 
position: static; 
bottom: SO0px; 
left: J0px; 
} 
</style> 
<title> 设 置 无 定位 </title> 
</head> 
<body> 


和 生生 stvieo "lelt: sOprrbop: SOpr?™> 
<1img src="image/star.Jpg" /> 
<img id=imgl src="image/darkgray.Jpg" /> 
<1mg src="image/star.Jpg" /> 

<jdliv> 

<dlv style="]eft: 200px;top: 200px; "> 
<1img src="image/star.Jpg" /> 
<1mg src="image/darkgray-.Jpg" /> 
<1img src="image/star.Jpg" /> 

</d1iv> 

<div style=—"Left: 350px7top: 350px? "> 
<1mg src="image/star.Jpg™" /> 
<img 1i1d=img3 src="image/darkgray.]Jpg" /> 
<1img src="image/star.Jpg" /> 

</div> 

</body> 


在 浏览 器 中 打开 网 页 文件 chapter8.13.html， 页 面 效 果 如 图 8-15 所 示 ， 可 以 看 到 无 定位 
的 效果 。 第 一 组 和 第 三 组 的 图 片 虽然 设置 了 位 移 属性 ， 但 是 因为 position 属性 值 是 static， 
因此 位 移 属 性 不 起 作用 。 
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口 设置 无 定位 wx | 十 


立 人 加: 


图 8-15 设置 无 定位 的 页 面 效 果 


AS 8.9 回 到 工作 场景 


通过 8.2~8.8 节 内 容 的 和 学习， 已 经 学 习 了 盒子 模型 的 概念 和 作用 ， 和 擎 握 了 使 用 盒子 模型 
来 设置 元 素 的 内 容 范 围 、 内 部 边 距 、 边 框 和 外 部 边 距 ， 和 擎 握 了 使 用 display 属性 来 设置 元 素 
的 块 级 或 内 联 属 性 ， 和 擎 握 了 使 用 float 属性 来 设置 元 素 与 周围 元 素 之 则 的 浮动 关系， 掌握 了 
使 用 z-index 属性 来 设置 多 个 位 置 重 登 的 元 素 的 堆 登 天 系 ， 营 握 了 使 用 position 属性 来 设置 
元 素 的 定位 方式 。 下 面 回 到 前 面 介 绍 的 工作 场景 中 ， 完 成 工作 任务 。 

【工作 过 程 一 】 制 作 网 页 一 一 《电子 世界 网 站 首页 》。 工作 过 程 一 的 页 面 效 果 如 图 8-16 


所 未 。 
一 口 和 
六 ”下 过 茶 单 实例 x | 十 
| (人 ] 27 00.1:8020/HTML5%2bC553%2bJavascript 网 页 设计 空 用 季 程 /实例 /第 9 齐 /chapter8.14.htm Ne 全 = 


欢迎 来 到 电子 世界 。 
硕 筹 您 能 得 到 满 高 的 服务 。 


图 8-16 《电子 世 弄 网 站 首页 》 的 页 面 效果 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


创建 网 页 ， 文 件 名 为 chapter8.14.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<title> 下 拉 菜 单 实 例 (w3cschool.cn}</title> 
<meta charset="utf- 8"> 
<Style> 
ul { 
1ist-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background—color: #333; 


} 

11 { 
float: left; 

} 

Ti 河 ， 

-dropbtn 1 
display: inline-block; 
Color: white; 
text-align: center; 
padding: 1l4px 16PX; 
text-decoration: none; 

} 


11 a:hover., 

-dropdown:hover .dropbtn { 
background-—color: #aaa; 

} 

-dropdown 
display: inline-block; 

} 

-dropdown—content 1{ 
display: none; 
position: absolute; 
background—color: #f9£f9f9; 
min—width: 160px; 
box—shadow: Opx 8px l6px Opx rgba(l0, 0, 0, 0.2)，; 

} 

-dropdown—content a 1{ 
color: blacks 
padding: 12px l16px; 
text-decoration: none; 
displavy: block;s 

} 

-dropdown—content a:hover 1 
background—color: #3£f1f1f1 
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-dropdown:hover .dropdown—content 1{ 
display: block; 
} 
</style> 
</head> 
<body> 
<H1 > 
i 
<a Class—"active™ href="#home"> 主 由 x/a> 
</11> 
< 
<a href="#news"> 新 闻 </a> 
< 11S 
<div class="dropdown"> 
<a href—"4" elase— "ropbtams /a 
<div class="dropdown—content"™"> 
< ref—"Y" Las 
:i a 
< ef "4"> a 
<idlyw> 
</div> 
</ul> 
<h3> 欢 迎 来 到 电子 世界 。</h3> 
<p> 和 希望 您 能 得 到 满意 的 服务 。</P> 
</body> 
</html> 


【工作 过 程 二 】 制 作 网 页 一 一 《 栖 高 的 星空 》。 工 作 过 程 二 的 页 面 ， 鼠 标 指针 未 移 到 
图 片上 的 页 面 效果 如 图 8-17 所 示 。 


口 息 
六 图 片 作 为 下 拉 荣 单 完 例 Ed 十 
CG 加 127.0.0.1:8020/ 第 8 章 /chapter8.15.html? hbt=1553244331853 证” 蝗 
下 拉 图 片 


移动 鼠标 指针 到 图 片上 显示 下 拉 内 容 。 


图 8-17 鼠标 指针 未 移 到 图 片上 的 页 面 效 果 
鼠标 指针 旦 个 于 图 片上 的 页 面 效 果 如 图 8-18 所 示 。 
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= 口 A 
六 图 片 作 为 下 拉 荣 单 实证 x + 
他 O127.0.0.1:8020/ 第 8 章 /chapter8.15.html? hbt=1553244331853 玄机 
4 [二 
下 拉 图 片 


移动 鼠标 指针 到 图 片上 显示 下 拉 内 容 。 


这 是 一 个 下 拉 图 片 的 实例 . 


图 8-18 ”鼠标 指针 悬 停 于 图 片上 的 页 面 效 果 


创建 网 页 ， 文 件 名 为 chapter8.15.html， 内 容 如 下 : 


<IDOCTYPE html» 


<html> 
<head> 
<title> 图 片 作 为 下 拉 菜 单 实例 </title> 
<meta charset=—"utf 8"»> 
人 <styleS 
-dropdown 
position: relative; 
display: inline-block; 
} 
-dropdown—content 1 
display: none; 
position: absolute; 
background—color: #f9f9f9; 
min—width: 160px; 
box—shadow: UPX 8px le6px 0PX rgba(0, 0, 0, 0.2)，; 
} 
-dropdown:hover .dropdown—content 1 
display: block; 
} 
.desc I 
padding: 1l15px; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<h2> 下 拉 图 片 </h2> 
<p> 移 动 鼠 标 指针 到 图 片上 显示 下 拉 内 容 。</p> 
<dliv class="dropdown"> 
<1img src="image/star.Jpg" alt="star™ width="100™ height="50"> 
224 -- 
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<dliv class="dropdown-content"> 
<1img src="image/star.Jpg" alt="starn" width="400™ height="200"> 
<div class="desc"> 这 是 一 个 下 拉 图 片 的 实例 。</div> 
</div> 
</dliv> 
</body> 
</html> 


【工作 过 程 三 】 制 作 网 页 一 一 《图 片 语 》。 工 作 过 程 三 的 页 面 效果 如 图 8-19 所 示 。 
口 ” 强 片 原 录 例 wx | 十 


人 127.00.1:80207HTML5%2bC5s3%2bjavascript 网 页 设计 六 用 教 但/ 福 例 /第 4 章 /thapte..， 让 但 


图 8-19 《图 片 廊 》 的 页 面 效果 


创建 网 页 ， 文 件 名 为 chapter8.16.html， 内 容 如 下 所 示 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title> 图 片 廊 实 例 </title> 
<Sstyle> 
div.1img 1{ 
margin: 2pxXx; 
border: lpx solid #000000; 
height: auto; 
width: auto; 
Filoats Leftks 
text-align: center; 
} 
div-.img imqg { 
display: inline; 
marglin: 3px; 
border: lpx solid #ffffffs; 
} 
div.img a:hover img { 
border: lpx solid #0000ff£; 
} 


divy .desce 4 
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text-align: center; 
font-weight: normal; 
width: 120pxs 
margin: 2pXx; 
} 
< 号 七 交工 上 > 
</head> 
<body> 
<div Class="1mg"> 
<a target—"™" blank™ href—"$"><1Img src—"image/castles pg" alt=" 
旅途 探秘 " wiqdth="110" height="90"></a> 
<div class="desc"> 旅 途 探 秘 </div> 
> 
<dlv C1as3s="1mgm> 
<a target=" blank" href="#"><img src="image/food.jpg"” alt=" 百 
尖 美 味 " width="110" height="90"></a> 
<div class="desc"> 百 尖 美 味 </div> 
< 7GV> 
<dlyv Class="img"> 
<a target=" blank" href="#"><img src="image/star.jpg" alt=" 艺 
不 之 路 "width-—"LT1D™ height-—"90"s<fa> 
<div class-"desc"> 艺 术 之 路 </div> 
</d1iv> 
<dly Class="1mg"> 
<a targets" Dlank™ href="t"ymy sre "moe teaver .Jpog"” nte" 
大 文 胜地 "wigdth"110" height="90"y</a> 
<div class="desc"> 人 文 胜 地 </div> 
< div> 
</body> 


【工作 过 程 四 】 制 作 网 页 一 一 《人 力 资 源 管 理 系 统 页 
8-20 所 示 。 


再 》。 工 作 过 程 四 的 页 面 效 果 如 


白 ”人力 资源 管理 系 入 | 十 


| T2700.1:80207HTML5352bC553e2bjavascript 网 页 设计 空 用 纵 程 / 空 便 / 第 9 襄 /chapter8.17.html?_hbt=153233b270465 十 本 : 


从事 管理 考勤 管理 并 交管 理 工资 管理 


当前 个 A 工作 计划 符 内 任务 
早上 好 ! 


> Ei 公司 公告 
您 目前 有 15 冬 符 处 理事 宜 ，1 条 考 勘 异常 ，2 泽 通 知 ! 2 

言 十 知 加 
护 日 万 量 ” 李 平 的 请 候 申 语 已 抄 准 ， 忆 朋 尘 妈 时 间 汶 2014-02-10 ， 为 划一 天 。 各 入 日 历 “ 震 知 。 知 百 了 
TI ”入 捍 交 的 清 同 申 读 未 市 扩 通过 二 0 了 

July 
Gs | Me | WW | Wr | Th | Fr | sa 行 尘 兢 
续 癌 打 
二 得 记录 
国 已 完 虑 打分 
i | Ee 
520 100 30 
已 完成 打 符 人 数 赤 打 六 太吉 异 党 打 某 信赖 


图 8-20 ” 《人力 资源 管理 系统 页 面 》 的 效果 
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Qcharset "wutf-8"; 

body,hl,h2,h3,h4,hy,he,hr,p,form,blockgquote,dl,dd,pre 1{ 
margin: 0; 

} 

button, th td 1 
padding: 0; 

} 

ul,ol,textarea, input 1 
margin: 0; 
padding: 0; 

} 

ul.ol { 
list-style: none; 

} 

tabjle I 
border—collapse: collapse; 
border—spacing: 0; 

} 

hl,h2,h3,h4,h5,h6 1 
font—-size: 100%; 
font—-weight: normal; 

} 

fieldset,1img { 
border: 0; 

} 

select, Input, img, select 1 
vertical-align: middle; 

} 

-button 1 
color: #$#Eff; 

} 

input {} 

select,textarea {} 

h2 1 
font-—family: "Microsoft YaHei™; 
font-weight: 700; 


} 

body I{ 
font: 12px/1.5em Arial; 
CoOlor: #000; 
background: #fafafa; 

} 

a 1 
text-decoration: none; 
coOlor: #6936969; 

} 
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a:hover 1 
text—-decoration: underline; 
COlor: #696969; 

.Clear 1{ 
clear: both; 


-header ff 
height: SOpx; 
margin: 0 auto:; 
background: #2553a0; 

} 

header .top {} 

.header .top .logo I 
float: Left; 
height: 39px; 
padding-left: lO0px; 
padding-right: 34px; 
padding-top: Spx; 
width: 197px; 

} 

.Nav I1 
FlioaEs elkey 

} 

.nav 11 | 
float: lefts; 
height: 5S5Opx; 
line—height: 50px:; 

} 

a 1 
color: #FFEFFEFE; 
display: block:; 
font—family: "Arial™; 
font—size: 16px; 
padding: 0 30px; 

} 

-nav 11 a:hover I 
background: #35710d2; 
text—-decoration: none; 

} 

-Seleli a | 
background: #3570d2; 


.Container 1 
height: auto!important; 
height: 850px; 
min—height: 850px; 
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.Jeftbar 1 
background: none repeat scroll 0 0 #FFFFFF'; 
border—right: lpx solid #C8C7C7; 
float: left; 
height: auto !important; 
height: 800px; 
min-—height: 800px; 
padding: l0px; 
width: 220px; 
} 
i ee */ 
m0Ol { 
padding-bottom: 15px; 
} 
.Peptx 1 
FionaEs Leltes 
} 
-pepdet 1 
Flea etes 
padding-left: lO0px; 
padding-top: 1l15px; 
} 
-pepdet P 1 
line-—height: 20px; 
width: 100%; 
} 
-Pepname { 
color: #000000; 
font-size: l16px; 
padding-bottom: 10PX; 
font-family: "Microsoft YaHei™; 
} 
title 1 
height: 35px; 
line-—height: 35px; 
border-bottom: lpx dashed #C8CJCJ; 
} 
etall 1 
border-top: lpx dashed #cC8CiCIi; 
margin—top: 2px; 


padding: Spx; 


a Rs */ 
Jm02 .iceon,.1m03 .1con 1 

float: left; 

padding-—right: lipx; 

padding-top: llpx; 
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} 
-1 mu hz 二 -JIm03 h2 1 
fioat= left; 


font— sizes ldpx; 


.mainbody ({ 
margin—left: 241px; 


.CUrrmenuyu 1{ 
background: url("../images/rignavbg.Jpg") repeat-x scroll left top; 
height: 3i7px; 
} 
"rig nav 13 { 
Floats Lelts 
line-height: 37px; 
border—right: lpx solid #DDDDDD; 
} 
-P19g naw 11 a 1 
font=slze: lApx; 
height: 35px; 
line—height: 35px; 
padding: 0 25px; 
} 
-Pig Selely span | 
background: none repeat scroll 0 0 #C8Ci/C]7; 
color: #FFFFFF; 
margin—right: 8px; 
padding: 0 Spx lpx 2px; 
Cursor: pointers 
} 
和 LE a 1 
color: #638ECT; 
font—-weight: bold; 


ee 设置 问候 语 、 提 示 信 息 和 公告 ----------------------- */ 
.adtip 1{ 
background: none repeat scroll 0 0 #EFFFFEFF; 
border-bottom: lpx solid #cC8C7C7; 
height: 82px; 
} 
.goom 1 
font—-size: lA4px !important.; 
padding-bottom: Spx; 
} 
-Ly { 
float: Left: 
padding: 15px; 


} 
二 PP | 
font—-size: 16px; 
line-height: 22px; 
} 


-tip P span { 
Color: #638ECT7; 
font— size: 16px; 
font—-weight: bold; 
padding: 0 Spx; 

} 


.QT 1 
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background: none repeat scroll 0 0 #FFEDBB; 


border: lpx soliqd #DCC0O74; 
float: right; 
height: 40px; 
line-height: 40px; 
margin—right: 20px; 
margin—top: 20px; 
padding: 0 16PX; 
width: 450px; 

} 

-adv p I 
FGars eltey 

} 

-Adv span 1 
float: right.; 
cursor: Pointer;> 


} 
.下 可 Tink 
height: 73px; 
padding: 1l5px 20px 1l5px 15px; 
border-bottom: lpx solid #cC8C7C7; 
} 


-P10 Jink nl 11 
FLoanks erts 
padding—right: 12px; 


P19: lm01, .rig lm02, .719 im03 1 
padding: 0 20px 0 lS5px; 
} 


-Tig TB sicony srF1g lme2 scon; .Tg 1m03 viceon 1 


fioats elfts 
padding—right: llipx; 
padding-top: llpx; 

} 


-P10 m0 h2, -r1g m02 h22 m03 h2 1 


float: left:; 
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font-size: 1l4px; 


} 
-red numb { 
background: none repeat scroll 0 0 #DB6969; 
color: #FFFFFF; 
font-welilght: bold; 
margin—left: 1l10px; 
padding: lpx 6pxX:; 
} 


-grey numb 1 
background: none repeat scroll 0 0 #bfbebe; 
COLOT : #FFFFFF; 
font-welLght: bold; 
margin—left: 10px; 
padding: lpx 6pXx; 

} 

-1g lm01 .datol 1 
border: lpx soliqd #D5D5D5; 
height: 30px; 
padding: 8px l10px; 
margin—top: 1l10px; 

} 

-1g JIm01 -gat02 1 
border: lpx solid #D5D5D5; 
border-top: none; 
height: 30px; 
padding: 8px lO0px; 
margin-bottom: 1l10px; 

} 

-dat0l span 1{ 
Loats Lefts 

} 

-dat02 span 1 
Tioats Lefer 


} 
-Sqdeta 1 
Font size: Lipx; 
11ne-helght: 30px; 
padding-left: 25px; 
margin top: 10px; 
} 


.Sqdeta img { 
padding-—right: 1l10px; 


} 
-1inkbut f 
float: right; 
line—-height: 30px; 
} 


,了 了 而 了 1 二 a 4 
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colors #1ldi9ers 

padding: 0 8px; 
-datt1i span f 

color: #BBBBBPB; 

font—size: 20rx; 

font—-weight: bold; 


} 

-Jan { 
font— silize: 12px 11mportant; 
font-welight: normal !important; 
padding-—-left: 2px; 

} 

Wi 
Eloats Defks 

} 

-Jd img 1 
margin—top: 1l10px; 
padding-—left: Spx; 

ys 
Floats Defts 
padding-—-left: 22px; 
padding-top: 120px; 
padding-—right: 30px; 

} 

-Ds 和 
padding-—bottom: Spx; 

} 


.ScoOordet1 1 
TlLoats Leftks 

} 

.SCOrdet1 ul 11 I 
border: lpx solid #DDDDDD; 
float: Lefts 
height: 130px; 
margin—right: 30px; 
margin—top: 28px; 
width: 155px; 

-SCOrdet1 ul 11i1p { 
Font=s1 zes S30 
height: 90px; 
line—height: 90px; 
text-allign: center; 


} 
.VwCc { 

COlor: #76bd42. 
} 
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-WWC 1{ 
color: #f3a055e6; 

} 

Yea .4 
color: #db6969; 

} 

/去 支 太太 云云 支 去 支 志 支 支 去 支 友 支 支 支 支 支 支 支 支 支 支 支 二 置 绩效 打分 进度 [区 坟 去 去 云南 支 去 去 去 去 去 去 去 友 友 支 去 支 太 支 支 支 友 太 支 / 

.SCordet ul 11 h3 1 
background: none repeat scroll 0 0 #EFEFEF; 
color: #666666; 

Font-sLize: Ldpx; 
font—-weight: bold; 
height: 40px; 
line-height: 40px; 
text-align: center; 

} 

-Pig Img2 detail .det inner 1{ 
border: lpx solid #D5D5D5; 
height: 180px; 
margin-bottom: 1l0px; 
margin—top: 1l10px; 

} 


创建 网 页 ， 文 件 名 为 chapter8.17.html， 内 容 如 下 : 


<IDOCTYPE> 
<htm]l> 
<head> 
<meta http-equiv="Content-Type" content="text/htm]l; charset=utf-8" /> 
<meta name="descriptionn content=" 人 力 资源 管理 系统 " /> 
<title> 人 力 资源 管理 系统 </title> 
<11nk type—"text/css" rel—"styjesheet™ href—"css/chapter3.17.css" > 
</head> 
<body> 
<dliv class="header"> 
<div class="top"> <img ClLass="1o0go"” src="image/l10go.Jpg" /> 
<Ul1 class="nav"> 
<11 class="seleli"> 
< ref="#"3 和 有 自由 </a> 


<j11> 
<]11> 

<a href-"#"> 人 事 官 理 </a> 
< 1 
<]11> 

<a href="#"> 考 惑 管 理 </a> 
</11> 
<]11> 

<a href="#"S> 和 绩效 管 理 </a> 
< 
<]11> 
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<a href="#"> 工 资 管理 </a> 
El 
al 
</div> 
</div> 
<divyv Class="container™"> 
<div class="leftbar™> 
<div class="1m01"> <img class="peptx"™ src="image/tximg .Jpg" /> 
<div class="pepdet™> 
<p class="pepname"> 韩 梅 梅 </p> 


<p> 人 事 科 科 员 </p> 
</d1liv> 
<div class="clear" ></divy> 


/div> 
<odivw class— "Lm02" 
<div class="title"><Iimg class="1con" 
src="image/datalcon.Jpg" /> 
<h2> 日 历 </h2> 
GT 
<div class="detail”> <mg class="" 
SEC ImageykJ .pg9" /2 {tdiv> 
El 
<div Class— "m03"> 
<div class="title"><img style="padding—-right:5px;" 
class—"1icon™” src=—"1imagqe/wealcon. pg /> 
<h2> 备 不 录 </h2> 
<ydiv> 
<div class="detail"> <img class="" 
src— "limage/k] 02.]pg"” /> </div> 
<IdIv> 
</div> 
<dly class="mainbody"> 
<div class="currmenu"> 
< Class— "P11g nav > 
< Classe"rig SeleLl™"y 
i he) i 
<11> 
< href="#"> 个 人 中 心 </a> 
</11> 
了 
< href—"#"3 工 作 计 划 <y/a> 
“LL 
<11> 
<a href="#"> 待 办 任务 </a> 
Hl 
Hal 
GIF 
<div class="adtip"> 
<Hdv Elass="EnpD"y 
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<p class="goom"> 早 上 好 ! </p> 
<p> 您 日 前 有 <span>15</span> 条 待 处 理事 宜 ， 
<span>1</span3 条 考勤 异常 ，<span>2</span3 条 通知 ! </p> 
< 
<div Class="adv™"> 
<p>》 公 司 公告 </p> 
<spany> x </spany> </divy> 
/dlv> 
“i l= "Pl m1" 
<div class="title"><img src~="image/l1isticon.]Jpg" 
Cl1ass="1cCon” style="pPadding—top:13px; "> 
<h2> 通 知 </nh2> 
<span class="red numb">2</span></div> 
<diYy class="detail™> 
<div class="dat0l1l"> <span 
class="datti"><span>14</span> <br /> 
<span class="Jan">July</span></span> <span 
class="sqdeta"><img src="image/bs 03.jpg"> 李 平 的 请 假 申 请 已 批准 ， 假 期 开始 时 间 为 
2014-02-10， 为 期 一 天 。</span> 
<p class="1linkbut™> 
<a href="™#"> 加 入 日 万 </a> 
x 
< Href—"}"SNhET </a> 
</p> 
</d1liv> 
<div class="dat02"> <span 
class="datti"><span>14</span> <br /> 
<span class="Jan">July</span></span> <span 
class="sqdeta"><img src="image/bs 04.jpg"> 您 提交 的 请 假 申 请 未 审批 通过 </span> 
<p class="1linkbut"™> 
i 
< href—"™4" > 知道 了 </a> 
</p> 
</div> 
< [div 
< ET> 
< CLASS 可 了 
<div class="title"><img src="image/l1isticon.]jJpg" 
class—"icon™ style—"padding top:l3per "S 
<h2> 绩 效 打分 进度 </h2> 
人 <div 
<dav class="detail"y> 
< class— "det Tnmer™S 
<div class="]Jd"><img src="image/Jd.Jpg" alt="" 
title=""></div> 
<div class="bs"> 
<p><Iimg sre—"tmage/bs 01-]pg” alt=™" 
title=""> 已 完成 打分 </p> 
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<p><Img src—"image/bs 02.Jpg" alt=™" 
tit1le=""> 未 完成 打分 和 异常 打分 </p> 


</div> 
<div class="scordeti"™"> 
<uUul> 
11 
<p class="ywc">520</p> 
<h3> 己 完成 打分 人 数 </h3> 
<i11iy 
1 
<p Class="wwc">100</p> 
<h3> 未 打分 人 数 </n3> 
</11> 
11 
<D Tlass—"ycd">30</p> 
<h3> 异 常 打分 人 数 </h3> 
</11> 
el 
</div> 
</div> 
</dliv> 
</dliv> 
</d1liv> 
</div> 
<dly Class="footer™></div> 
</body> 
</html> 


“8.10 工作 实 训 营 


8.10.1 训练 实例 


1. 训练 内 容 


对 第 7 章 工 作 实 训 营 中 设计 的 个 人 信息 网 站 的 三 个 页 面 进行 优化 ， 使 得 网 页 中 各 元 素 
之 间 的 布局 恰当 


2. 训练 目的 
> 掌握 盒子 模型 的 概 食 。 


> 潮 握 使 用 CSS 设置 元 每 日 身 大 小 和 边框 。 
> 笛 握 使 用 CSS 设置 元 系 浮 动 、 元 系 层 登 和 元 聚 定 位 。 


3. 训练 过 程 
参照 8.9 节 中 的 操作 步骤。 
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4. 技术 要 点 
使 用 盒子 模型 时 ， 往 往 要 计算 距离 。 


8.10.2 工作 实践 常见 问题 解析 


【和 常见 问题 1】 如 何 去 除 浮动 ? 

【 答 】 当 子 元 素 设 置 了 浮动 ， 父 元 系 没 有 设置 浮动 而 导致 父 元 素 噩 度 个 能 目 动 扩展 ， 
缩 成 一 条 线 ， 子 元 素 从 父 元 素 中 洲 出 时 ， 适 合 使 用 同时 设置 width:100%( 或 固定 宽度 
值 )+overflow:hidden 的 方式 来 清除 浮动 ;此 法 可 同时 去 除 坚 邻 的 块 级 元 系 受 到 的 浮动 影 啊 ， 
而 不 需要 于 对 受到 浮动 影响 的 紧邻 的 块 级 元 素 设 置 去 除 浮动 。 

如 果 是 紧邻 的 块 级 元 素 受 到 浮动 影响， 对 该 受 到 影 啊 的 块 级 元 素 设 置 clearboth 或 者 
clear:left、clear:Tight 更 为 合适 。 

【常见 问题 2】 如 何 使 用 CSS 实现 页 面 中 内 容 部 分 布局 自 适 应 ? 

【 答 】CSS 页 面 布 局 实现 内 容 部 分 目 适 应 屏 医 ， 当 内 容 局 度 小 于 浏览 郁 窗 口 高 度 时 ， 
页 脚 在 浏览 器 窗口 底部 ， 当 内 容 高 度 高 于 浏览 堪 窗 口 高 度 时 ， 页 脚 目 动 被 撑 到 窗口 底部 。 

CSS 设置 如 下 : 
<stvle type="text/css"> 
ee 0; 
padding: 0; 
box—-sizling: border-box; 


} 

html ， 

body { 
width: 100%; 
height: 100%; 

} 

main 1 
overflow: hidden; 
position: relative; 
min—height: 100%; 
background: #eee; 

} 

Ted 4 


margin—bottom: S50Opx; 
height: 200px; 
background: #f£f00; 

} 

-footer f 
position: absolute; 
bottom: Os 
eb Es Ws 
height: S50Opx; 
width: 100%; 
background: #0f£0; 

} 

</style> 
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< 8.11 本 章 小 结 


CSS 使 用 了 盒子 模型 来 拉 述 网 页 中 元 系 的 布局 。 每 个 元 系 都 是 一 个 例子， 它 有 人 外边 距 、 
边框 、 内 边 距 和 内 容 四 个 属性 。 除 了 内 容 ， 其 余 每 个 属性 部 可 分 为 四 边 : 上 下 左右 ; 这 四 
部 分 可 同时 设置 ， 也 可 分 别 设置 。 

对 于 每 个 元 素 ，width 属性 可 用 来 设置 元 素 的 宽度 ; height 属性 可 用 来 设置 元 素 的 局 度 ; 
border-style 属性 可 用 来 设置 边框 的 样式 ;border-width 属性 可 用 来 设置 边框 宽度 :border-color 
属性 可 用 来 设置 边框 闫 色 ; padding 属性 可 用 来 设置 盒子 模型 的 内 边 距 ; margin 属性 可 用 来 
设置 例子 模型 的 外 边 距 。 

对 于 网 页 中 元 素 和 元 素 之 则 的 位 置 天 系 ，display 属性 可 用 来 设置 元 素 的 块 级 或 内 联 属 
性 ; float 属性 可 用 来 设置 元 系 与 周围 元 每 之 间 的 浮动 关系 ; z-index 属性 可 用 来 设置 多 个 位 
置 重 登 的 元 素 的 层 登 关系 ;position 属性 可 用 来 设置 元 素 的 定位 方式 。 


一 、 单 项 选择 题 


1]. 在 CSS 中 ， 下 面 不 属于 盒子 模型 属性 的 是 (  )。 
A. font B. margin C. padding D. border 
2. 如 何 显示 这 样 一 个 边框 : 顶 边框 10 像素 ， 底 边框 5 像素 ， 左 边框 20 像素 ， 右 边 
框 1] 像素 。(  ) 


A.border-wldth:10px lpx Spx 20px B. border-width: 10px 20px Spx 1px 

C. border-width:Spx 20px 10px lpx D. border-width: 10px Spx 20px 1px 
3. ”金子 模型 中 ，margin 属性 的 数值 赋值 顺序 为 ( ” ). 

A. 顶 、 右 、 底 、 左 B. 顶 、 底 、 左 、 太 

和 大 交 了 在 。 启示 


4. ”关于 用 z-index 改变 元 素 营 加 顺序 的 说 法 正确 的 是 ( : 
A. z-index 值 越 大 ， 这 个 元 素 的 位 置 就 越 靠 上 
B. z-index 值 越 大 ， 这 个 元 素 的 位 置 就 越 靠 下 
C. z-index 值 越 大 ， 这 个 元 素 的 位 置 就 越 徘 中 央 
D. 以 上 说 法 都 错 。 
5. CSS 属性 position 值 为 ( ” ”) 时 ， 元素 以 正常 的 流 形式 显示 ，top、Tright、bottom.、 
left 和 z-index 属性 值 无 作用 。 


A. absolute B. fixed C. relative D. static 
二 、 盾 空 题 
1. CSS 金子 模型 属性 中 ， 可 为 元 素 设置 宽度 ， 
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可 为 元 素 设 置 高 度 ， 
可 为 元 素 设 置 内 边 距 ， 可 为 元 素 设 置 边 框 ， 
可 为 元 素 设 置 外 边 距 。 
2. 设置 CSS 属性 display 的 值 为 时 ， 可 设置 
元 素 显 示 为 内 联 元 素 ， 该 值 是 默认 值 。 
3. 设置 CSS 属性 float 的 值 为 时 可 取消 元 素 


4. 设置 CSS 属性 clear 的 值 为 时 可 清除 左右 

5. 设置 CSS 属性 position 的 值 为 时 ,其 left、 
right、top、bottom 属性 值 作 为 其 位 置 的 偏 移 值 来 处 理 。 

三 、 操 作 题 

创建 网 页 《南京 全 美 家 居 有 限 公司 网 站 首页 》, 文件 名 为 ex8.1.html, 页 面 效 果 如 图 8-21 
所 示 。 页 面 主题 、 文 字 和 图 睛 可 自行 设置 ， 页 面 布 局 相近 即 可 。 


= i 
EE ee— “= 


> pe sw 
设 为 首 1 联系 我 们 | 意见 反 愤 | 
| LJ 2 P= a 
ea - PA Ws 


企业 简章 ， Comnans 


南京 从 奖 寒 居 有 限 兴 司 创立 于 1990 年 ， 拥 有 国际 
融 彰 中国 传 证 京 化 理念 和 欧 贰 前 视 时 尚 设计 化 鹤 届 产品 制造 基地 。 欧 涛 以 基体 赔 柜 为 龙 类 ， 
的 元 素 ， 为 消费 者 提供 高 端 定制 寒 居 产 品 ， 策动 相关 产业 党 必 ， 世 括 伞 尿 定 制 。 衣 柜 ， 卫 
为 志 闪 创造 更 美好 客 适 的 商 申 质 日 常生 活 ， 深 。 本 门 。 墙 惰 壁 钨 ， 厨 房 电 器 、 让 具 等 ， 量 成 
多 元 北 产 业 格 局 ， 是 国内 综合 型 的 现代 整体 家 居 
生化 服务 供应 商 ， 


地 扯 ; 江 硒 省 南京 市 栖霞 区 西峰 路 冉 号 原 权 所 有 :; 南京 全 美 过 居 有 限 翁 司 


8-21 文件 ex8.1.html 对 应 的 页 面 效 果 


标识 仁和 头 键 全 
常量 和 变量 

数据 类 型 
流程 控制 

函数 


掌握 JavaScript 基本 数据 结构 
掌握 JavaScript 基本 数据 类 型 。 
掌握 JavaScript 流程 控制 。 
掌握 JavaScript 函数 定义 与 调用 。 
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“9.1 工作 场景 导入 


【工作 场景 


ay 


如 何 给 HTML 网 页 增加 动态 效 霖 ， 使 网 页 内 容 更 加 丰 语 ， 如 动态 的 玉 单 ， 浮 动 的 广告 
等 ， 如 何 使 网 页 具有 动态 交互 的 功能 ， 比 如 提交 表单 时 ， 检 查 表 单元 素 是 否 为 空 、 是 否 合 
法 等 及 时 响应 用 户 各 种 操作 。JavaScript 就 是 一 种 比较 流行 的 制作 网 页 交互 的 脚本 语言 ， 它 
由 客户 端 浏览 器 解释 执行 。 

下 面 需要 完成 打印 金字 塔 、 九 九 乘法 表 等 页 面 。 

【引导 问题 】 

(1) 怎样 在 网 页 中 髓 入 JavaScript 脚本 ? 

(2) 怎样 定义 第 量 、 变 量 ? 

G) 怎样 控制 程序 流程 ? 

(4) 怎样 定义 函数 完成 未 个 功能 ? 


<、 9 7 了 了解 JavaScript 


随 着 Web 技术 的 发 展 ，Web 前 端 开 友人 员 除 了 需要 掌握 最 基本 的 Web 语言 基础 
HTML， 进 行 静态 页 面 的 设计 ， 还 需 让 页 面 动 起 来 ， 能 够 与 用 户 进行 交互 。JavaScript 是 一 
种 基于 对 象 和 事件 驱动 的 脚本 语言 ， 可 以 实现 客户 端 用 户 与 服务 端的 信息 交互 处 理 。 

JavaScript 脚本 也 是 一 种 程序 ， 可 在 HTML 页 面 中 引入 ， 其 引入 位 置 主要 有 两 个 。 


1. 在 HTML 内 部 
JavaScript 脚本 放 在 <script> 和 </script> 之 间 ，<script></script> 第 党 放 在 <head></head> 或 


者 <body></body> 之 间 。 
【实例 9.1] 在 浏览 器 窗口 输出 “Hello World !”， 文 件 名 称 为 chapter9.1.html， 内 容 如 下 : 


<1DOCTYEE html»> 
<htm]l> 
<head> 
<meta charset="UTF-8"»> 
<title> 第 一 个 JavaScript 程序 </title> 
<script type="text/Javascript"> 
window.onload=function()t 
document .wrtite ("Hello world'™); 
} 
</script> 
</head> 
<body> 
</body> 
</html> 
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在 浏览 万 中 打开 网 页 文件 chapter9.1.html， | 
页 面 效 本 加 图 9-1 所 示 o WE 127.0.0.1:8020/ 教 材 / 实 x 时 Vv 计量 间 
2 在 外 部 的 文件 中 GG 全 | 加 127.0.0.1:8020/ 教 材 /实例 /第 9 章 /ch... 乌 胡 | ; 
菏 个 页 面 要 直接 使 用 脚本 ， 通 过 上 面 的 
方法 (在 HIML 页 面 内 部 编写 脚本 代码 )， 但 
很 多 情况 是 多 个 页 面部 使 用 同一 脚本 ， 为 了 
提高 代 但 的 重用 性 ， 方 便 维 护 代 码 ， 这 时 可 


Hello world! 


以 使 用 外 部 脚本 的 引用 来 实现 。 采 用 图 9-1 “Hello world!” 示 例 图 
JavaScript 编写 的 脚本 ， 保 存 为 文件 名 以 后 
缀 .js 结尾 的 文件 ， 然 后 在 各 个 页 面 插 入 标记 <script></script>， 并 在 该 标记 中 插入 src 属性 ， 


就 可 以 调用 .js 文件 了 。 其 语法 格式 如 下 : 
<seript Sec] as 文件 的 DR1L 地 性 ”csceipt> 


【实例 9.2】 在 浏览 右 窗 口 弹出 警告 框 “Hello World !”， 文 件 名 称 为 chapter9.2.html， 
编写 的 JavaScript 脚本 文件 名 为 script 9.1.css。 
chapter9.2.html 文件 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 引 入 外 部 文件 </title> 
< Sre—™]S/ scriplo LS" < ErInLtS 
</head> 
<body> 
</bhody> 
</html> 


script9.1.css 文件 内 容 如 下 : 


window.onload=1init: 
function 1in1it( ) 1{ 
alert ("Hello World!"); <!-- 弹 出 对 话 框 --> 


} 

在 浏览 器 中 打开 网 页 文件 sm x 
chapter9.1.html， 页 面 效 果 如 图 9-2 所 示 。 | X 合 |@ 127.00.18020/ 教 材 / 实 例 /第 以 六 | : 
上 RE 127.0.0.1:8020 显示 
A 注意 : 在 JavaScript 中 ，“; ”作为 结束 FR 


标记 。 用 “//” 作 为 单行 标记 注释 ， 

Wt 作为 多 和 注释 标记 。 
注释 语句 在 代码 执行 过 程 中 不 被 
解释 执行 。 


9-2 引入 外 部 文件 .js 效果 图 
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9.2.1 标识 符 和 关键 字 


1. 标识 符 

在 JavaScript 中 ， 标 识 伯 用 来 命名 变量 和 函数 。 合 法 的 标识 符 命 名 规则 和 其 他 语法 命名 
规则 相同 ， 第 一 个 字符 必须 是 字母 、 下 划 线 ( ) 或 者 美元 符号 (8)， 其 后 的 字符 可 以 是 字母 
数字 、 下 划 线 或 者 美元 符号 ; 但 标识 符 不 能 取 JavaScript 保留 关键 字 ， 同 时 避免 使 用 HTML 
和 Windows 对 象 和 属性 的 名 称 作 为 JavaScript 的 变量 及 函数 名 。 

例如 ， 合 法 标识 和 从: 1 user $str sl 

2. 关键 字 

关键 字 是 指 在 JavaScript 中 有 着 特 殊 含义 的 标识 人行。 在 JavaScript 中 ， 一 些 关 键 字 不 能 
作为 变量 名 、 图 数 名 等 。 第 见 的 保留 天 键 字 如 表 9-1 所 示 。 


表 9-1 JavaScript 的 关键 字 


abstract | continne | finally | instanceof | private | thow 
boolean | default | float pie | this 

break a fr ineee | retum | typeof 
double | fimction | long | at | 

Case zoto native static Var 

cateh al ase |new | 岂 | package 
rotected synchronized 


void tows | tansient |t with | volatik 


me yd | | | 


1. 常量 


企 计算 机 程序 运行 时 ， 不 会 被 程序 修改 的 量 ， 即 其 值 不 能 被 改变 的 量 为 弟 量 。 常 量 主 
要 是 用 于 提供 固 定 的 和 精确 的 值 ， 比 如 数学 、 了 字符 串 等 。 沼 量 一 般 从 其 字面 形式 ， 常 量 称 
为 字面 音量 或 直接 第 量 。 第 量 声明 和 定义 语法 格式 如 下 : 


const 


常量 : 数据 类 型 = 值 ; 
2. 变量 
JavaScript 变量 可 用 于 存放 值 ( 如 x=5) 和 表达 式 (比如 s=x+y)。 


1) ”变量 命名 规则 
> ”变量 名 必须 以 字母 开头 ， 也 能 以 $ 和 ”符号 开头 ， 其 后 可 以 是 数字 、 字 母 、$ 符 
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号 和 _ 符号 。 

> ” JavaScript 变量 名 区 分 大 小 与 。 

> 不 能 使 用 JavaScript 中 的 天 键 字 。 

2) ”变量 定义 和 赋值 

变量 的 使 用 需 先 声明 定义 ， 再 赋值 ， 在 JavaScript 中 ， 变 量 都 是 以 关键 字 var 声明 ， 其 
声明 变量 的 语法 格式 如 下 : 

var i ; 或 者 var i，j; // 可 以 同时 定义 多 个 变量 

声明 并 赋值 的 格式 如 下 : 


和 过 二 二 


若 只 是 对 变量 定义 了 ， 未 赋值 ， 该 变量 默认 值 为 undefined; 使 用 var 关键 字 大 多 次 定 
义 同 一 个 变量 并 赋 初 始 值 ， 每 一 次 的 定义 和 赋值 是 对 变量 的 重新 定义 及 赋值 。 

3) ”变量 的 作用 域 

变量 的 作用 域 是 指定 义 变量 的 作用 范围 。 在 一 个 函数 内 部 定义 的 变量 为 局 部 变量 。 其 
作用 的 范围 是 该 函数 的 内 部 。 函 数 结束 了 ， 该 变量 的 生命 周期 也 结束 了 。 

震 当 给 一 个 未 定义 的 变量 赋值 时 ， 该 变量 为 全 局 变量 。 全 局 变量 作用 于 整个 脚本 代码 
范围 中 。 


SS 9.3 数据 类 型 

JavaScript 脚本 语言 同 其 他 语言 一 样 ， 有 其 目 喘 的 基本 数据 类 型 、 表 达 式 和 算术 运算 符 
等 。 在 JavaScript 脚本 语言 中 数据 类 型 都 是 弱 类 型 ， 在 声明 时 ， 不 需要 指定 数据 类 型 ， 在 赋 
值 时 确定 其 类 型 即 可 。JavaScript 基本 数据 类 型 主要 是 数值 类 型 、 布 尔 类 型 、 字 符 串 类 型 和 


9.3.1 数值 类 型 


数值 类 型 是 基本 的 数据 类 型 ， 在 JavaScript 中 支持 的 数值 类 型 ， 包 括 整 型 和 浮 点 数 ， 所 
有 的 数值 都 是 以 浮 点 数 形式 表示 ， 可 表示 的 整数 范围 是 -2 一 2”， 可 表示 的 绝对 值 最 大 的 
浮 点 数 为 +1.7976x10“、 绝 对 值 最 小 的 浮 点 数 为 42.22$0x10-”。 

1. 十 进 制 数 


十 进 制 数 就 是 通常 0 一 9 之 间 的 数字 组 合 的 数 。 例 如 : 12、90、-234、6.5、8.12E-2 等 。 
2. 十 六 进 制 和 八进制 类 型 


十 六 进 制 数 以 前 级 0X 或 者 0x 开头 ， 后 面 可 以 是 0 一 9 之 间 的 任何 数字 及 A 一 E( 不 区 分 
大 小 写 )。 例 如 : 0X3F9，0x5fffa 等 。 
八进制 数 以 前 级 0 开始， 后面 可 以 是 数字 0 一 7。 例 如 : 00、02、0632 等 。 
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3. 特殊 值 infinity 和 NaN 


特殊 值 infinity 表示 无 穷 大 ， 当 一 个 数值 或 数值 表达 式 的 值 超出 可 表示 的 最 大 值 时 可 以 
当 作 infinity; 特殊 值 -infinity 表示 无 穷 小 ， 当 一 个 数值 或 数值 表达 式 的 值 超出 可 表示 的 最 小 
值 时 可 以 当 作 -infinity。 

特殊 值 NaN 表示 不 是 一 个 数字 。 通 过 调用 isNaN 方法 可 以 确定 一 个 值 是 否 为 数字 


9.3.2 布尔 类 型 


Boolean 类 型 数据 称 为 布尔 类 型 ， 其 取 值 为 true 或 者 false。 


9.3.3 字符 串 类 型 


在 JavaScript 中 ， 字 符 串 类 型 是 由 字符 、 数 字 、 标 点 符号 等 组 合 而 成 的 。 在 编写 程序 过 
程 中 可 使 用 单 引 号 或 双 引 号 来 界定 。 
例如 : "hello"，" 你 好 "，str=" 我 爱 学 习 'Javascript"'!ll!li!" 
右 是 用 字符 串 表 示 一 些 特 殊 的 字符 ， 比 如 换行 、 回 车 等 之 类 的 ， 需 要 使 用 转 义 字符 。 
在 JavaScript 中 可 以 使 用 的 转 义 字符 如 表 9-2 所 示 。 
表 9-2 转 义 字符 


转 义 字符 合 义 
Y 单 引 与 (?”) 
Ys 双 引 号 ( ” ) 
\ 反 和 斜 杠 (\) 
换行 
YY 回 车 
\t tab( 制 表 符 ) 
\b 退 格 
f 换 页 符 


9.34 null 和 Undefined 


在 JavaScript 中 ， 有 两 个 特殊 的 类 型 null( 空 值 ) 和 undefined( 未 定义 类 型 )。 

宝 值 null 不 是 空 字符 或 者 0， 用 于 定义 一 个 空 的 或 者 不 存在 的 引用 ， 只 是 一 个 占 位 符 ， 
即 表 示 给 已 经 定义 的 变量 赋 初 始 值 为 null。undefined( 未 定义 类 型 ) 表 示 是 一 个 变量 已 经 定义 
尚未 赋 初 始 值 。 
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运算 付 


运算 符 是 一 


赋值 运算 符 、 


1. 算术 运算 符 


系列 表示 操作 的 符号 。 按 运算 符 的 类 型 可 分 为 算术 运算 符 、 比 较 运 算 符 、 
也 辑 运算 符 和 条 件 运算 人 符 等 。 


Ar 


算术 运算 人 符 用 于 进行 如 、 减 、 乘 、 除 等 运算 。 在 JavaScript 中 ， 常 用 的 运算 和 从 如 表 9-3 


所 示 。 


表 9-3 算术 运算 符 


摘 述 例 了 于 

223 

3-2-1 

1 “3 一 

4/2=2 

40%02=0 

x=]:y=x++: 输 出 结果 y=1]，x 的 值 为 2 
x=];y=++x; 输 出 结果 y=2，x 的 值 为 2 
x=5:y 一 Xx- - ;输出 结果 y=5，x 的 值 为 4 
x=5;y 一 - -x ;输出 结果 y=4，x 的 值 为 4 


2. 比较 运算 符 
比较 运算 从, 用 于 测定 变量 或 值 是 人 否 相 等 , 返回 一 个 布尔 值 true 或 者 false。 在 JavaScript 
中 常用 的 比较 运算 符 如 表 9-4 所 未 。 


表 9-4 比较 运算 符 


摘 述 三 :本 
等 于 1==6 返回 值 为 false 
绝对 等 于 ( 值 和 类 型 均 相等 ) 2===2 ”返回 值 为 true 
只 看 值 是 否 相 等 ， 不 涉及 类 型 "1"!=] 返回 值 为 false 
值 和 类 型 有 一 个 不 相等 ， 或 两 个 都 不 相等 "1"!==1 返回 值 为 true 
A 4>2 ”返回 全 为 true 
4<2 。 返回 值 为 false 
-或 等 于 ~] 退回 信 为 tmue 
返回 值 为 true 


ER 
国有 
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3. 赋值 运算 符 


在 JavaScript 中 ， 赋 值 运算 符 分 为 简单 运算 符 和 复合 运算 符 。 人 简单 运 算 符 是 将 赋值 运算 
rip 而 复合 运算 从 是 先 计算 右边 的 表达 式 的 值 赋 给 左边 。 


各 见 的 JavaScript 赋值 运算 符 如 表 9-5 所 示 。 
表 9-5 赋值 运算 符 
运算 符 描 述 例 子 
= 将 右边 表达 式 的 值 赋 给 左边 变量 
二 将 左边 的 变量 加 上 右边 的 表达 式 的 值 赋 给 左边 的 变量 n+=2 // 相 当 于 n=n+2 


= 将 左边 的 变量 减 去 右边 的 表达 式 的 值 赋 给 左边 的 变量 n--2 // 相 当 于 nn-2 
+ 将 左边 的 变量 乘 以 右边 的 表达 式 的 值 赋 给 左边 的 变量 n*=2 /相当 于 n=n*2 
/= 将 左边 的 变量 除 以 右边 的 表达 式 的 值 赋 给 左边 的 变量 n/=2 // 相 当 于 n=n/2 


00= 将 左边 的 变量 除 以 右边 的 表达 式 的 余数 赋 给 左边 的 变量 n9%0=2 ”// 相 当 于 n=n%2 
&= 将 左边 的 变量 与 右边 的 表达 式 进行 逻辑 与 运算 赋 给 左边 的 变量 | n&=2 /相当 于 n=n&2 
= 将 左边 的 变量 与 右边 的 表达 式 进行 逻辑 或 运算 赋 给 左边 的 变量 | nj=2 /相当 于 n=nl2 

= 将 左边 的 变量 与 右边 的 表达 式 进 行 逻 辑 异 或 运算 赋 给 左边 的 变量 | n^=2 /相当 于 n=n^2 


4. 远 辑 运算 符 
在 JavaScript 中 增加 了 几 个 布尔 逻辑 运算 从，JavaScript 文 持 的 第 用 布尔 运算 人 符 如 表 9-6 


所 示 。 
表 9-6 逻辑 运算 符 
运 算 符 描述 

取 反 

& 与 运算 

二 与 运算 之 后 再 赋值 
或 运算 

= 将 左边 的 变量 与 右边 的 表达 式 进 行 逻辑 或 运算 赋 给 左边 的 变量 

逻辑 异 或 

Ws 将 左边 的 变量 与 右边 的 表达 式 进行 逻辑 异 或 给 左边 的 变量 


5. 条 件 运 算 符 
条 件 运算 从 是 JavaScript 文 持 的 一 种 特殊 的 三 目 运 算 符 ， 其 语法 格式 如 下 : 
操作 数 1? 表达 式 1: 表达 式 2 
各 操作 数 1 的 值 为 “true”, 则 整个 表达 式 的 值 为 表达 式 1; 知 操 作 数 1 的 值 为 “false” 
则 整个 表达 式 的 值 为 表达 式 2。 
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6. 运算 符 的 优先 级 


在 JavaScript 中 ， 各 种 运算 符 按 照 某 种 优先 级 的 顺序 进行 计算 。 这 种 顺序 被 称 为 运算 符 
优先 级 。 优 先 级 高 的 运算 符 将 先 于 级 别 较 低 的 运算 符 进 行 运算 ; 在 具有 同 级 运算 符 的 情况 
下 ， 按 照 从 左 到 右 的 顺序 计算 。 在 JavaScript 中 ， 运 算 符 优先 级 如 表 9-7 所 示 。 


表 9-7 JavaScript 运算 符 优先 级 


运 算 符 优先 级 
U、[ 
he 
i 
本 
ee 
先 
人 级 
es 三 1 一 人 
是 由 
、 高 
到 
低 
履 性 
| 
2 


人 售 ，9.5 流程 控制 


每 一 个 完成 霖 个 功能 的 程序 都 是 由 很 多 个 语句 组 合 构成 的 ， 看 干 个 语句 是 按照 什么 样 
的 流程 顺序 执行 ， 就 需要 使 用 流程 控制 语句 对 程序 执行 的 汽 程 进行 控制 。 在 JavaScript 中 ， 
流程 控制 语句 主要 包括 条 件 语句 、 循 环 语句 等 。 


9.5.1 条 件 控制 

在 JavaScript 中 ， 条 件 语 句 包 括 if...else 语句 和 switch 语句 ， 使 用 这 些 语句 可 以 实现 单 
路 分 文 语句 及 多 路 分 文 语句 。 

1. if...else 语句 

if...else 是 单 路 分 支 语 句 ， 但 也 可 以 伦 套 ， 其 具体 语法 形式 如 下 : 


if (条 件 1) 
{ 语 句 块 1] 
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else 


{语句 块 2} 
if...else 语句 执行 流程 如 图 9-3 和 图 9-4 所 示 。 


图 9-3 ”if...else 语句 执行 流程 (1) 


条 件 1 是 一 个 布尔 表达 式 ， 当 其 值 为 true 时 执行 语句 块 1， 若 其 值 为 fasle， 则 执行 语 
句 块 >。 语句 块 1 和 语句 块 2 可 以 是 单个 语句 或 者 多 个 复合 语句 块 。 
if...else 语句 也 可 以 进行 扩展 ， 来 处 理 多 个 条 件 分 支 ， 其 语法 格式 如 下 : 


if (条 件 1) 
{语句 块 1;1 
else if (条 件 2) 

{语句 块 2;} 
else if (条 件 3) 
{语句 块 3; } 


else 


{语句 块 n;1 


证 司 块 1 语句 块 2 


图 9-4 ”if...else 语句 执行 流程 (2) 
【实例 9.3】 根 据 不 同时 间 显 示 不 同 的 问候 语 ， 文 件 名 称 为 chapter9.3.html， 其 文件 内 


容 如 下 : 
< 1 DOCTYPEE tm > 
< tm > 


<head> 
<meta charset="UTF-8"> 
<title>if lse 语句 </titley 
<SCript language="jJavascript™" type="text/jJscript™ > 
Var SMsqg=—""} 
Var ONOW = mew Date (1) ， 
Var 1LIHouTr = oNow.getHours (); 
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1f(iHour < 6)1 

sMsg=" 凌 展 了 ， 还 没 休 恩 吗 ?"， 

}else 1f(1iHour < 8}1 
sMsg=" 早 上 好 ! "; 

}else if{(iHour < 12})1 
1 

lelse 1f (1Hour < 14) { 
sMsg=" 中 午 好 ! " 

else 1f(iHour < 18)1 
sMsg=" 下 午 好 ! " 

}else i1f (ijHour < 221) { 
sMsg=" 上 晚上 好 ! "; 


}elsef 
sMsg" 夜 深 了 ， 该 休息 了 ， 做 个 好 梦 ! "; 
} 
document .writeln("<p align=\"center\"™>"+sMsg+"</p>"),，; 
</script> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter9.3.html， 页 面 效 果 如 图 9-5 所 示 。 


/站 if else 语 句 xX 


CG 合 | @ 127.0.0.1:8020/ 教 材 /实例 /.，Q 妆 


上 午 好 ! 


9-5 if...else if 语句 页 面 效果 
2. switch 语句 
switch 语句 是 多 路 分 支 语句 ， 当 指定 表达 式 的 值 与 菜 个 值 匹 配 时 , 就 是 执行 该 路 分 支 语 
9j。 其 语法 如 下 : 


switch (表达 式 ) { 

Ease， 但 1 证 17break; 
case 值 2: 语句 27break; 
ESaSe 但 3 语 介 3;break; 


case 值 n: 语句 3:break: 


default: 
默认 语句 ; 
} 
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当 表 达 式 的 值 与 值 1 匹配 时 ， 执 行 语句 1 组 合 ， 当 表达 式 的 值 与 值 2 匹配 时 ， 残 执行 
语句 2 组 合 ， 直 到 表达 式 的 值 与 值 n 比较 完毕 时 ， 看 都 不 匹配 ， 默 认 执 行 默 认 语 句 。 

其 中 break 表示 跳 转 语句 , 与 continue 通 币 用 在 while、do...while、for 和 switch 语句 中 。 
break 表示 终止 循环 ,强行 退出 循环 ,不 执行 循环 体 中 剩余 的 语句 和 剩余 的 循环 次 数 ,continue 
表示 中 止 本 次 循 坏 ， 不 再 执行 循环 体 中 下 面 的 语句 ， 跳 回 循 坏 起 始 位 置 开始 下 一 炊 循 坏 。 

【实例 9.4】 根据 用 户 输入 的 年 份 获 取 生 肖 ， 文 件 名 称 为 chapter9.4.html， 其 文件 内 容 
如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="utf-8"™ /> 
tt leyeo/titlex 
<SCript> 


function showShengx1lao() { 
Var iRemainder, sShenxiao; 
Var iYear = Gocument .forml .txtYear.value; 
手 二 站 证 重合 本 下 = 全 
alert ("请 输入 出 生年 份 ! "); 
document .forml .txtYear.focus (}; 
returns 
}elself 
liRemainder = iYear $§ 12; 
} 
swlitch (1IRemalnaqer) { 
CasSe 0: 
ssShengxiao 二 =“ 并"; 
break; 
Case 1: 
sShengxiao = " 鸡 "; 
break; 
CAaSe 2: 
sshengxiao = " 狗 "; 
break; 
CasSe 3: 
henyriao = “BS 
break; 
Case 4: 
sshengxiao 王 ”了 慑 ”; 
break; 
CaSe J: 
ssShengxiao = "和 牛 "; 
break; 
CasSe 6: 
sShengxiao = " 席 "; 


break:; 
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Case 1/ : 
SShendgdxlao = " 使" ; 
break; 

Case 8: 
sohoengxtad = "PE" 
break; 

CasSe 9: 
sshengxiao = "WE"; 
break; 

case 10: 
selondxiao = "EH": 
break; 

case 11: 
sshengxiao 一 一 于” 
break; 


document .getElementById ("Shengxiao") .InnerHTML=" 您 的 生肖 是 : 
<b>™ + SShengxiao + "</b>": 
} 
< Cripty> 
</head> 
<body> 
<form id="forml™" name="forml™ method="post™ action=""> 
<fieldset> 
<legend> 根 据 出 生年 份 计算 生肖 </legend> 
<p align="center"> 请 输入 您 的 出 生年 份 : 
<input name=—"txtYear™” type="text™ 1d=—"txtYear™” size="12"™ /> 
<input name="btnShow" type="button™ id="btnSshow" 
onclick="showSshengxiao (};" value=" 显 示 和 生肖" /> 
<Ip> 
<p 1Lq="Shengxlao" align="center">&nbsp;</p> 
</fieldset> 
</form> 
</body> 
</{html> 


在 浏览 器 中 打开 网 页 文件 chapter9.4.html， 页 面 效 果 如 图 9-6 所 示 。 


i 
口 127.0.0.1:8020/ 教 材 / 实 F X WW 
CG 合 | @ 127.0.0.1:8020/ 教 材 /实例 /.， 久 公 | : 


柱 扩 出 生年 份 计 算 生 并 


请 输入 您 的 出 生年 份 : | 2000 
您 的 生肖 量 : 龙 


9-6 ”switch 多 路 分 支 
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9.5.2 ”循环 控制 


循环 语句 指 的 是 当 满 足 某 条 件 的 情况 下 反复 执行 某 一 个 操作 。 循 环 控 制 语 句 主要 包括 
三 种 : while、do...while 和 for 循环 语句 。 


1. while 循环 语句 
while 循环 语句 也 称 前 测试 循环 语句 ， 该 结构 主要 是 通过 某 个 条 件 来 控制 是 否 继续 重复 


执行 这 个 语句 。 其 语法 格式 如 下 : 
while (条 件 ) { 


循环 体 语 句 
: 
当 条 件 的 结果 为 true 时 ,重复 执行 循环 体 (语句 块 )。while 循环 语句 的 执行 流程 如 图 9-7 
所 示 。 


图 9-7 while 循环 语句 的 执行 流程 
2 do...while 循环 语句 
do...while 循环 语句 是 后 测试 循环 体 ， 先 执行 循环 体 一 次 ， 然 后 判断 条 件 ， 大 条 件 为 
true， 继 续 执 行 循环 体 ， 人 否则 跳出 循环 体 , 这 种 结构 循环 体 全 少 被 执行 一 次 。 其 语法 形式 如 下 : 
do 1{ 


循环 体 : 
}while (条 件 ); 


do...while 循环 语句 的 执行 流程 如 图 9-8 所 示 。 

3. for 循环 语句 

for 循环 是 在 几 种 重复 结构 中 格式 与 用 法 最 灵 
活 的 ， 在 循环 过 程 中 需要 记录 循环 次 数 ， 一 般 是 用 
于 循环 识 数 已 定 的 情况 。 它 的 一 般 格 式 为 : 

Tel 达 动 1 表达 式 2 2 当 达 式 331 

{ 循环 体 ; } 

表达 式 1: for 循环 的 循环 初 值 。 

表达 式 2: 循环 条 件 ， 值 为 false 时 循环 结束 。 9g9-8 do while 循环 语句 的 执行 流程 

表达 式 3: 每 次 循环 时 所 进行 的 计算 和 更 新 。 
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执行 for 重复 结构 的 步骤 : 
(1) 先 计算 表达 式 1( 只 计算 一 次 )。 
(2) 接着 检查 表达 式 2 的 值 是 true 还 是 false， 硅 为 false， 则 不 执行 语句 (循环 体 )， 退 
出 循环 ， 奢 为 tue， 就 执行 给 定 的 语句 。 
(3) 再 计算 表达 式 3。 
(4) 再 检查 表达 式 2 的 值 ， 根 据 值 为 true 或 为 false 决定 是 耕 执 行 循 环 体 。 
【实例 9.5】 在 页 面 上 显示 一 个 金字 塔 ， 文件 名 称 为 chapter9.5.html， 其 文件 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 打 印 金 字 塔 </title> 
<SCript type="text/Javascript"> 
for (var 1=—=20s1<—150r14=1074 
document .write (<hr width=" "+1+" >"); 
// 页 面 上 输出 hr 水 平 线 ， 其 宽度 由 循环 变量 i 决定 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter9.5.html， 页 面 效 果 如 图 9-9 所 示 。 


OO 
/中 打印 全 字 堪 \N 
C 合 |@ 127.00.1:8020/ 教 材 /实例 /第 9 章 /c 乌 倪 


9-9 打印 金字 塔 效果 图 
“YY 9.6 函数 
9.6.1 水 数 定义 


图 数 是 指 完成 傈 个 任务 的 一 组 JavaScript 语句 ， 该 语句 代码 可 以 被 备 复 调用 执行 。 函 数 
由 关键 字 function 定义 ， 其 具体 语法 格式 如 下 : 
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function 函数 名 ([ 参 数 1]， [参数 2]，, [参数 3],..... .1])1{ 
声明 和 语句 

[return 表达 式 ] 

} 


定义 图 数 名 ， 可 以 是 任何 有 效 的 标识 符 。 
匿名 定义 图 数 形 式 如 下 : 
var func = function (参数 列表 ) { 
声明 和 语句 ; 
) 
与 以 下 函数 等 价 ， 
function (参数 列表 ) { 
声明 和 语句 ; 
} 
定义 函数 时 也 可 以 和 藤 套 另 一 个 函数 的 定义 ， 称 为 峙 套图 数 。 使 用 舱 套 函数 可 以 把 一 个 
消 数 的 可 见 性 封装 在 男 一 个 冰 数 中 ， 使 得 内 部 函数 作为 外 层 全 局 冰 数 的 私有 函数 。 
function funcli( ) { 
声明 ; 


function func2( }1 


声明 和 语句 ; 


【实例 9.6】 定 义 函 数 并 实现 在 页 面 上 输出 内 容 “Hello World!”， 访 函数 不 市 参数 ， 
编写 JavaScript 脚本 ， 定 义 函 数 文 件 内 容 如 下 : 
function printText ( ) { 
document .write ("Hello World!'™"™).: 


} 


9.6.2 ”函数 调用 


函数 定义 完 ， 需 要 被 调用 才 会 执行 。 接 看 上 面 的 实例 9.6 介绍 如 何在 页 面 上 调用 已 定义 
印 数 ， 一 般 在 <body></body> 之 间 插 入 <script></script> 标 记 ， 在 <scrip 人 之 间 插 入 JavaScript 
脚本 ， 或 者 在 <head></head> 之 间 引 入 脚本 .js 文件 。 实 例 9.6 文件 chapter9.6.html 文件 内 容 
如 下 : 
<1DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF— 8™> 
<title> 函 数 调用 </title> 
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<script 七 YPe= " text/Javascript"> 
// 定 义 函 数 
function myFunction'() 
{ 
document .write ("Hello World!™); 
} 
</script> 
</head> 
<body> 
<!--- 调 用 阔 数 -一 > 
<button onclick="myFunction()"> 扩 击 这 里 </button> 
</body> 
</html> 


带 参 数 及 返回 值 函 数 的 定义 及 使 用 示例 如 下 。 
【实例 9.7】 计 算 两 个 数 乘积 函数 ， 并 在 页 面 上 显示 其 结果 ， 编 写 的 JavaScript 脚本 ， 
文件 名 为 chapter9.7.html， 其 文件 内 容 如 下 : 


<IDOCTYPE 了 tm > 


<html> 
<head> 
<meta charset="UTF-8"> 
<titles<ttit le 
</head> 
<body> 
<dly id="demo"></div> 
<Script type—"text/ "avascript™"> 
function myFunction (a,b) 
{ 
return a*b; // 返 回 仁 
} 
document .getElementById ("demo") .innerHTML-=myFunction (1,2);// 调 用 函数 
</jscript> 
</body> 
</html> 


“9.7” 回 到 工作 场景 


通过 对 9.2 一 9.5 节 内 容 的 学 习 ， 已 经 学 习 了 JavaScript 基本 语法 知识 ， 掌 握 了 如 何 编写 


JavaScript 脚本 。 
【工作 过 程 】 使 用 JavaScript 实现 九 九 乘法 表 ， 文 件 名 为 chapter9.8.html， 有 具体 操作 步 
又 如 下 上 所 示 。 


(1) 创建 HIML 文件 ， 代 码 如 下 : 


<1DOCTYPE html > 
<html> 
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<head> 
<meta http-equiv="Content-Type" content="text/htm]l; charset=utf-8"™ /> 
<title> 九 九 乘 法 表 </title> 
</head> 
<body bgcolor="#e0flff"™"> 
<table cellpadding="6" cellspacing="0" style=" border-collapse:collapse; 


border:none:™ > 


</table> 
</body> 
</html> 
(2) 编写 JavaScript 脚本 ， 完 成 九 九 乘法 表 的 具体 实现 : 
必 号 它 开 工程 七 六 


fo (war 1=1 >” 1<10 7 14++)1 

document .write(™<tr>"); 

for(var ] = 1 ; j <=i ; J++)t 

document .write ("<td style="'border:2px solid #004B8A ; background:#FFFFFF; ">" 
A 


document .write ("™</tr>").; 


} 
</script> 


在 浏览 器 中 打开 网 页 文件 chapter9.8.html， 页 面 效果 如 图 9-10 所 示 。 


DD 九 九天 寺 要 x 
@ 他 | 名 127.0.0.1:8020/ 教 材 / 空 例 /第 9 童 /chapter9.8.html a 家 | : 


图 9-10 ” 九 九 乘法 表 的 效果 图 
sa，9.8 工作 实 训 营 


9.8.1 训练 实例 


1. 训练 内 容 
自行 设计 一 个 页 面 ， 用 户 输入 一 个 整数 n， 计 算 1+2+3+...+100 的 和 。 
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2. 训练 目的 
掌握 函数 的 使 用 。 
掌握 循环 的 使 用 。 
掌握 页 面 内 容 如 何 显示 。 


万 

= 

= 

3. 训练 过 程 
参照 9.5 节 中 的 操作 步骤 
支 术 要 点 


4. + 
注意 循环 语句 的 选择 及 循环 控制 条 件 的 设置 。 


9.8.2 工作 实践 常见 问题 解析 
【常见 问题 】while 与 do...while 的 区 别 是 什么 ? 


【 答 】while: 先 判 断 再 执行 ， 有 可 能 一 次 都 不 执行 。 
do... while: 先 执 行 再 判断 。( 无 论 如 何 都 会 执行 一 次 循环 体 里 面 的 代码 ) 。 


“9.9 本 章 小 结 


JavaScript 是 网 页 用 于 与 用 户 交 互 的 脚本 语言 ， 授 过 移入 或 导入 到 HTML 文档 中 实现 。 
每 一 种 语言 都 有 自己 的 语法 规则 ，JavaScript 基本 语法 知识 主要 包括 数据 类 型 、 变 量 定 义 、 
运算 从 、 程 序 控制 结构 (顺序 、 选 择 、 和 循环 结 构 ) 及 函数 定义 和 运用 等 。 

JavaScript 有 基本 数据 类 型 和 特殊 类 型 。 其 基本 类 型 包括 数值 类 型 、 字 和 从 类 型 、 布 尔 类 
型 ， 特 殊 类 型 主要 包括 undefined、null 等 。 

流程 控制 语句 中 条 件 控制 语句 直 ..else 让 、switch 语句 及 循环 控制 语句 while、do...while 
和 for 语句 在 实际 开发 过 程 中 经 常 引 用。 

图 数 作为 一 个 独立 的 逻辑 单元 ， 在 实际 应 用 的 过 程 中 使 得 JavaScript 脚本 代 公 更 简洁， 
易 维护 ， 提 高 重用 性 。 


sa 9.10 习题 


一 、 单 项 选择 题 
1]. JavaScript 脚本 文件 的 扩展 名 是 (  )。 


A. .css B. .html C. .script D. .js 
2. 可 以 在 下 列 哪个 HIML 元 素 中 放置 JavaScript 代码 ? ( ) 
A. <script> B. <Javascript> C. <Js> D. <scripting > 


3. 在 JavaScript 中 ， 需 要 声明 一 个 整数 类 型 的 变量 num， 以 下 哪个 ( 。”) 语 句 能 实现 
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上 述 要 求 ? 
A. mt num: B.numbernum: CC.varnum: D. Integer num: 
4. 以 下 哪 段 代 码 不 能 正确 创建 函数 show()? (  ) 
A. function show(text){ alert(text): } 
B. var showFun = function show(text){ alert(text): } 
C. var showFun = function(text){ alert(text): } 


D. var showFun =new function("text" , "alert(text)"!: 


二 、 填 空 题 


1. 语句 Var a: 执行 后 变量 a 中 的 值 是 ，4 的 类 型 是 

2. 执行 语句 a=12:document.writeln(a>10): 后 ， 页 面 上 显示 的 内 容 是 , 

3. 执行 语句 a=12: b=a%5: c= 十 +4: 后 ，b 中 的 值 是 ，C 中 的 值 是 | 

4. 执行 四 条 语句 a=3:b=5: b%=a:c=a>b?1:0 :后 ， 则 变量 a 中 的 值 是 ;变量 bb 中 


的 值 是 ， 变 量 c 中 的 值 是 . 

三 、 操 作 题 

创建 网 页 ， 实 现 一 个 简易 计算 器 ， 其 文件 名 为 ex9.1.html， 页 面 效 果 如 图 9-11、 图 9-12 
所 示 。 


一 一 一 


/中 简易 计算 器 x \ 


CG 全 | 中 127.0.0.1:8020/ 教 材 /习题 /第 9 章 /ex1.html 乌 倪 


IERAI 


图 9-11 输入 操作 数 的 页 面 效 果 


) 口 简易 计算 器 x 
GG 合 |@ 127.0.0.1:8020/ 教 材 / 习 题 /第 9 章 /exl.html 入 食 


EE 


图 9-12 ”简易 计算 器 的 页 面 效 果 


掌握 使 用 Date 对 象 实 现时 间 的 显示 。 
掌握 使 用 String 对 象 对 字符 串 进 行 操作 。 
掌握 使 用 Math 对 象 对 数字 进行 操作 。 
掌握 使 用 Array 对 象 对 一 组 数据 进行 处 理 。 
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售 ，10.1 工作 场景 导入 


【工作 场景 


网 页 中 用 户 登录 时 经 常用 到 当前 时 间 的 显示 、 用 户 名 有 效 性 的 判断 、 密 码 长 度 的 判断 、 
安全 性 验证 码 的 实现 等 效果 。 下 面 需 要 制作 四 个 网 页 ， 其 中 ，《 动 态 实 时 数字 时 钟 》 动 态 
显示 当前 时 间 ; 《用 户 登 录 界 面 》 实 现 用 户 名 有 效 性 判断 、 密 码 长 度 的 判断 ，《 验 证 码 的 
生成 》 实 现 随机 生成 四 位 验证 码 ; 《列表 菜单 选择 课程 》 实 现 选择 不 同 的 老师 ， 对 应 不 同 
的 课程 。 

【引导 问题 】 


(1) Date 对 象 如 何 使 用 ? 
(2) String 对 象 如 何 使 用 ? 
(3) Math 对 象 如 何 使 用 ? 
(4) Array 对 象 如 何 使 用 ? 


Se 10.2 JavaScript 的 对 象 概述 


JavaScript 是 一 种 基于 对 象 的 编程 语言 ，JavaScript 中 将 对 象 分 为 JavaScript 内 置 对 象 、 
浏览 器 内 置 对 象 和 目 定 义 对 象 三 种 。 
>  ” JavaScript 内 置 对 象 : JavaScript 将 一 些 音 用 功能 预先 定义 成 对 象 , 用户 可 以 直接 使 
用 ， 这 束 是 内 置 对 象 。 
> 浏览 器 内 置 对 象 : 浏览 器 对 象 是 浏览 器 根据 系统 当前 的 配置 和 所 装载 的 页 面 为 
JavaScript 提供 的 一 些 可 供 使 用 的 对 象 。 
> 目 定 义 对 象 : 目 定义 对 象 是 指 根据 目 己 的 需要 而 定义 的 新 对 象 。 
本 章 主 要 讲述 常用 JavaScript 内 置 对 象 ， 主要 掌握 对 象 的 使 用 、 对 象 如 何 创建 、 对 象 的 
属性 和 函数 的 使 用 。 


“S10.3 ”Date 对 象 


在 JavaScript 中 ， 没 有 日 期 时 间 型 数据 ， 但 是 在 开发 过 程 中 经 常会 处 理 日 期 ， 因 此 
JavaScript 提供 了 Date 对 象 来 操作 日 期 和 时 间 。 在 进行 日 期 时 间 处 理 时 , 不 同 的 场合 会 采用 
不 同 的 时 间 标 准 。 

在 JavaScript 中 ， 创 建 日 期 对 象 必 须 使 用 new 语句 。 使 用 关键 字 new 新 建 日 期 对 象 时 ， 
可 以 使 用 下 述 四 种 方法 : 

var 对 象 名 = new Date(); // 方 法 1: 创建 当前 时 间 的 Date 对 象 
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var 对 象 名 =new Date( 日 期 字 串 ); /方法 2: 使 用 日 期 时 间 字 符 串 创建 Date 对 象 

Var 对 象 名 = new Date( 年 ， 月 ， 日 [时 ， 分 ， 秒 ， 坚 秒 ]); /方法 3: 用 指定 日 期 时 间 数 
据 创 建 Date 对 和 象 

var 对象 名 =new Date( 军 秒 ); /方法 4: 使 用 时 间 戳 创建 Date 对 象 

上 述 四 种 创建 方法 ， 区 别 如 下 : 

(1) 方法 1 创建 了 一 个 包含 当前 系统 时 间 的 日 期 对 象 。 

(2) 方法 2 可 以 将 一 个 字符 串 转 换 成 日 期 对 象 ， 这 个 字符 串 可 以 是 只 包含 日 期 的 字符 
串 ， 也 可 以 是 既 包 售 日 期 又 包含 时 间 的 字符 串 。 JavaScript 对 日 期 格式 有 要 求 ， 通 常 使 用 的 

> ”日 期 字符 串 可 以 表示 为 “月 日 ,年 小 时 : 分 钟 : 秒 钟 ”， 其 中 月 份 必须 使 用 丙 

文 单词 ， 而 其 他 部 分 可 以 使 用 数字 表示 ， 日 和 年 之 轩 一 定 要 有 喜 号 (，)。 
> ”日 期 字符 串 可 以 表示 为 “年 /月 /日 小 时 : 分钟: 秒 钟 ”， 所 有 部 分 都 要 求 使 用 
数字 ， 年 份 要 求 使 用 四 位 ， 月 份 用 0 至 11 的 整数 ， 代 表 1 月 到 12 月 。 

(3) 方法 3 通过 指定 年 月 日 时 分 秒 创 建 日 期 对 象 ， 时 分 秒 都 可 以 省 略 。 月 份 用 0 至 11 
的 整数 ， 代 表 1 月 到 12 月 。 

(4) 方法 4 使 用 守 秒 (时 间 戳 ) 来 创建 日 期 对 象 .可 以 把 1970 年 1 月 1 日 0 时 0 分 0 秒 0 
坚 秒 看 成 一 个 基数 ， 而 给 定 的 参数 代表 距离 这 个 基数 的 坚 秒 数 。 如 果 指 定 参 数 坚 秒 为 300， 
则 该 日 期 对 象 中 的 日 期 为 1970 年 1 月 1 日 0 时 0 分 0 秒 300 盈 秒 。 

Date 对 象 的 方法 主要 分 为 三 大 组 : setXxx、getXxx 和 toXxx。setXxx 这 些 方法 用 于 设 
置 时 间 和 日 期 值 ，getXxx 这 些 方法 用 于 获取 时 间 和 日 期 值 ，toXxx 主要 是 将 日 期 转换 成 指 
定格 式 。Date 对 象 的 方法 如 表 10-1 所 示 。 


表 10-1 Date 对 象 的 函数 


另 数 描 述 
Date( 返回 当日 的 日 期 和 时 间 
setDate( 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1 ~ 31) 
zetDayt 从 Date 对 象 返 回 一 周 中 的 某 一 天 (0~6) 
setMonth( 从 Date 对 象 返 回 月 份 (0 ~ 11) 
vetFullYear() 从 Date 对 象 以 四 位 数字 返回 年 份 
setY ear() 请 使 用 getFullYear0 方法 代 蔡 
setHours() 返回 Date 对 象 的 小 时 (0 ~ 23) 
zetMinutes{ 返回 Date 对 象 的 分 钟 (0 ~ 59) 
zetSeconds 返回 Date 对 象 的 秒 数 (0 ~ 59) 
zetMilliseconds 返回 Date 对 象 的 蝶 秒 (0 ~ 999) 
getTime() 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
setTimezoneOffset( 返回 本 地 时 间 与 格林 威 治 标准 时 间 (GMT) 的 分 钟 差 
yetUJTCDate( 根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1 ~ 31) 
setUTCDay0 根据 世界 时 从 Date 对 象 返 回 周 中 的 一 天 (0 ~ 0) 
setUTCMonth( 根据 世界 时 从 Date 对 象 返回 月 份 (0 ~ 11) 
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续 表 

遇 效 描 述 
setUTCFulY earO 根据 世界 时 从 Date 对 象 返 回 四 位 数 的 年 份 
setUTCHours() 根据 世界 时 返回 Date 对 象 的 小 时 (0 ~ 23) 
setUTCMinutes() 根据 世界 时 返回 Date 对 象 的 分 钟 (0 ~ 59) 
setUTCSeconds 根据 世界 时 返回 Date 对 象 的 秒 钟 (0 ~ 59) 
getUTCMilliseconds 根据 世界 时 返回 Date 对 象 的 昌 秒 (0 ~ 999) 
arse() 返回 1970 年 1 月 1] 日 午夜 到 指定 日 期 (字符 串 ) 的 晶 秒 数 
setDate( 设置 Date 对 象 中 月 的 某 一 天 (1 ~ 31) 
setMonth( 设置 Date 对 象 中 的 月 份 (0 ~ 11) 
setFullYear() 设置 Date 对 象 中 的 年 份 (四 位 数字 ) 
setYear( 请 使 用 setFullYear0 方法 代替 
setHours 设置 Date 对 象 中 的 小 时 (0 ~ 23) 
setMinutes 设置 Date 对 象 中 的 分 钟 (0 ~ 59) 
setSeconds() 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 
setMilliseconds() 设置 Date 对 象 中 的 毫秒 (0 ~ 999) 
setTime 以 毫秒 设置 Date 对 象 
setUTCDatel) 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 ~ 3D) 
setUTCMonth() 根据 世界 时 设置 Date 对 象 中 的 月 份 (0 ~ 11) 
setUTCFullYear() 根据 世界 时 设置 Date 对 象 中 的 年 份 (四 位 数字 ) 
setUTCHours 根据 世界 时 设置 Date 对 象 中 的 小 时 (0 ~ 23) 
setUTCMinutes 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 ~ 59) 
setUTCSeconds( 根据 世界 时 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 
setUTCMilliseconds( 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 ~ 999) 
toSource( 返回 该 对 象 的 源 代码 
toString( 把 Date 对 象 转换 为 字符 串 
toTimeString() 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toDateStrng() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toGMTStringf 请 使 用 toUTCString0 方法 代 蔡 
toUTCString 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 
toLocaleString() 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
toLocaleTimeStrine 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleDateStrineg( 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
UTC 根据 世界 时 返回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf( 返回 Date 对 象 的 原始 值 

【实例 10.1】 分 别 使 用 上 述 四 种 方法 创建 日 期 对 象 ， 文 件 名 称 为 chapter10.1.html， 内 
容 如 下 : 
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<1DOCTYPE html> 
<html> 
<head> 
<meta charset="utf--8"»> 


<tit1le> 创 建 日 期 对 象 </title> 


<“script> 
// 以 当前 时 间 创 建 一 个 日 期 对 象 
Var myDatel = new Date (1) : 


/ /将 字符 串 转 换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2018 年 7 月 2 日 
Var myDate2 = new Date( Jualy 2,2018™)}，; 
/ /将 字符 串 转 换 成 日 期 对 象 ， 该 对 象 代表 日 期 为 2018 年 7 月 2 日 
Var myDate3 = new Date ("2018/7/2"); 
/ /创建 一 个 日 期 对 象 ， 该 对 象 代表 日 期 和 时 间 为 2018 年 7 月 2 日 16 时 16 分 16 秒 
Var myDated4 = new Date(2018,6,2,10,16,16); 
/ /创建 一 个 日 期 对 象 ， 该 对 象 代表 距离 1970 年 1 月 1 日 0 分 0 秒 20000 毫秒 的 时 间 
Var myDate> = new Date (20000)，; 
/ /分 别 输出 以 上 日 期 对 象 的 本 地 格式 
document .write ("myDatel 所 代表 的 时 间 为 : "+myDatel .toLocalestring ()+"<br>"); 
document .write ("myDate2 所 代表 的 时 间 为 : "-myDate2 .toLocaleSstring ()+"<br>"); 
document .write ("myDate3 所 代表 的 时 间 为 : "+HmyDate3 .toLocaleString() +"<br>") ; 
document .write ("myDate4 所 代表 的 时 间 为 : "+myDate4 .toLocalestring ()+"<br>"); 
document .write ("myDate5 所 代表 的 时 间 为 : "+myDate5 .toLocalestring () +"<br>") ; 

</ script> 

</head> 

<body> 

</body> 

</html> 


在 浏 贤 占 中 打开 网 页 文件 chapter10.1.html， 页 面 效 果 如 图 10-1(a)、(b) 所 示 ， 在 Chrome 
浏 窟 融和 Edge 浏 贤 器 显示 的 结果 和 有 不 同 。 


站 前 隆昌 期 对 鱼 >x 


Ea | DD 12700.1-23020/chiD/chapterl0.1.html | 
myDatel 所 心 表 的 时 间 为 732018, 10:09:38 AM 
myDate2 所 必 表 的 时 间 汶 :T22018 123:00:00 AM 
myDate3 所 心 表 的 时 间 为 ， T22018 12:00:00 AM 
myDated 所 性 表 的 时 间 为 ，732018, 4:16:1€ PR 
myDates 所 性 表 的 时 间 为 ; L11970, 8:00:20 AM 


(a) Chrome 浏览 器 中 的 结果 
10-1 4 种 方法 创建 Date 对 象 的 页 面 效果 
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局 避 曲 刍 HB 十 拘 x BD TN 
一 一 局 {0 Wh 127.0.0.180: I 让 7 人 Gy 


myrDatel 所 代表 的 时 间 为 : 2018 年 7 月 2 日 10:05:52 
myrDate2 耳 代 雪 的 时 间 为 : 2018 年 7 月 2 日 0:-00:00 
myDate3 所 代表 的 时 间 为 : 2018 年 7 月 2 日 0:00:00 
myDate4 所 代表 的 时 间 为 : 2018 年 7 月 2 日 16:16:16 
myDate5 所 代表 的 时 间 为 : 1970 年 1 月 1 日 8:00:20 


(b) Edge 浏览 器 中 的 结果 
图 10-1 4 种 方法 创建 Date 对 象 的 页 面 效 果 ( 续 
【实例 10.2】 使 用 Date 对 象 计算 程序 运行 时 间 ， 文 件 名 称 为 chapter10.2.html， 内 容 


如 下 : 
<IDOCTYPE html»> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<Seript> 
function 1oop 1() 
{ 
for (var 1=0;1<1000000;1++); 
} 
< script> 
<script>»> 
Var start time = Date.now(); 
loop (); 
Var end time = Date.now(}); 
Var time = end time-start time;// 得 人 到 1loop() 运行 时 间 
document .write ("执行 loop () 函数 所 用 的 时 间 为 : "+time+" 守 秒 ") ; 
< script> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter10.2.html， 页 面 效 果 如 图 10-2 所 示 ， loop0 函 数 的 功能 
是 执行 1 000 000 次 空 循环 ，now0 方 法 可 以 得 到 当前 时 间 稚 。end_time 减 去 start_time 得 到 
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loopO 因 数 执行 的 至 秒 数 。 


性 下 全 口 Re 
区 D127.0.0.1:8020ych1iDeh x 四 
CG Dn 127.00.1:8020/chli0/chanterl10.2.htm z 


执行 uapO 函 数 所 用 的 时 间 汶 ，2 厂 种 


图 10-2 ”设置 文字 滚动 的 方式 的 页 面 效果 
sa 10.4 String 对 象 


字符 串 类 型 是 JavaScript 中 的 非常 重要 的 基本 数据 类 型 之 一 ， 在 JavaScript 中 ， 可 以 将 
字符 串 直 接 看 成 字符 串 对 象 ( 即 String 对 象 )， 不 需要 任何 转换 。 在 对 字符 串 对 象 操 作 时 ， 不 
会 改变 字符 串 中 的 内 容 。 

字符 串 对 象 有 两 种 创建 方法 。 

(1) 下 接 声 明 字 符 串 变量 。 

通过 前 面 学 习 的 字符 串 变 量 方法 ， 把 声明 的 变量 看 作 字 符 串 对 象 ， 语 法 格式 如 下 : 

var 字符 串 变量 = 字符 串 

例如 ， 创 建 字符 串 对 象 myString， 并 对 其 赋值 ， 代 码 如 下 : 

Var myStrlng = "Hello World!™"; 

(2) 使 用 new 关键 字 创 建 字 符 串 对 象 ， 其 语法 格式 如 下 : 

var 字符 串 对 象 = new String() 

例如 ， 通 过 new 关键 字 创 建 字符 串 对 象 myString， 并 对 其 四 


Var “myString = new String( “Hello, World!” ): 


日 ， 代码 如 下 : 


: 上 述 两 种 语句 效果 是 一 样 的 ， 因 此 声明 字符 串 时 可 以 采用 new 关键 字 ， 也 可 以 
不 采用 new 关键 字 。 
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字符 串 对象 的 属性 比较 少 ， 钊 用 的 属性 为 ltngth。 字 人 符 串 对 象 的 属性 见 表 10-2。 


表 10-2 字符 串 对 象 的 属性 及 说 明 


襄 了 明 


constructor 字符 串 对 象 的 函数 原型 
lenoth 字符 串 长 度 
rototype 添加 字符 串 对 象 的 属性 
对 象 属性 的 使 用 格式 ， 如 下 所 未 : 
对 象 名 . 属性 值 // 获 取 对 象 属性 值 


对 象 名 .属性 名 = 值 // 为 属性 赋值 
例如 ， 声 明 字符 串 对 象 myArcticle， 输 出 其 包含 的 字符 个 数 : 


var myArcticle=" 床 前 明月 光 ， 疑 是 地 上 逢 。 举 头 望 明月 ， 低 头 思 故乡 。 一 一 李白 "; 


document .write (myArcticle.1length) ;// 输 出 字符 串 对 象 字 符 的 个 数 


作 注意 : 测试 字符 串 长 度 时 ， 空 格 也 占 一 个 字符 位 。 一 个 汉字 占 一 个 字符 位 ， 即 一 个 汉 


字 长 度 为 1。 


字符 串 对 象 是 内 置 对 象 之 一 ， 也 是 第 用 的 对 象 。 在 JavaScript 中 ， 经 常会 在 对 字符 串 对 


象 中 查找 、 苦 换 字 


串 。 表 10-3 所 示 为 字 付 串 对 象 弟 用 的 函数 。 
表 10-3 ”字符 串 对 象 的 国 数 


函 描述 
anchor() 创建 HIML 销 
big 用 大 号 字体 显示 字符 串 
blink0 显示 闪 动 字符 串 
bold0) 使 用 粗 体 显 示 字 符 串 
charAt 返回 在 指定 位 置 的 字符 
charCodeAt() 返回 在 指定 位 置 的 字符 的 Unicode 编码 
concat 连接 字符 串 
fixed( 以 打字 机 文本 显示 字符 串 
fontcolor() 使 用 指定 的 颜色 来 显示 字符 品 
fontsizeQ 使 用 指定 的 尺寸 来 显示 字符 串 
fromCharCode() 从 字符 编码 创建 一 个 字符 串 
IndexO 刀 检索 字符 串 
ltallcs( 使 用 斜体 显示 字符 串 
lastIndexOf( 从 后 辐 前 搜索 字符 串 
linkO 将 字符 串 显 示 为 链接 
localeComparel 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 
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描述 


match 找到 一 个 或 多 个 正则 表达 式 的 匹配 

replace 谷 换 与 正则 表达 式 匹 配 的 子 串 

search( 检索 与 正则 表达 式 相 [匹配 的 值 

slice 提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
smalll 使 用 小 字号 来 显示 字符 串 

split() 把 字符 串 分 割 为 字符 串 数组 

strike( 使 用 删除 线 来 显示 字符 串 

sub() 把 字符 串 显 示 为 下 标 

substr0) 从 起 始 索 引号 提取 字符 串 中 指定 数目 的 字符 
substring() 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
sup() 把 字符 串 显示 为 上 标 

toLocaleLowerCasel( 把 字符 串 转 换 为 小 写 


toLocaleUpperCase 
toLowerCasel ) 


toUpperCase 


把 字符 串 转 换 为 大 写 
把 字符 串 转换 为 小 写 
把 字符 品 转 换 为 大 写 


toSource 代表 对 象 的 源 代 三 
toString() 返回 字符 串 
valueOf() 返回 革 个 字符 串 对 象 的 原始 值 


【实例 10.3】 设 计 程 序 ， 在 文本 框 中 输入 字符 串 ， 单 击 “ 检 但 ”按钮 ， 检 碍 字符 串 是 


盏 为 有 效 字 人 符 串 (字符 串 是 否 由 大 小 写字 母 、 数 字 、 下 划 线 和 -构成 )， 如 图 10-3(a) 所 示 。 如 
果 有 效 ， 弹 出 对 话 框 提 示 “ 你 的 字符 串 合法 ”， 如 图 10-3(b) 所 示 ; 如 果 无 效 ， 弹 出 对 话 框 
提示 “你 的 字符 串 不 合法 ”， 如 图 10-3(c) 所 示 。 文 件 名 称 为 chapter10.3.html， 内 容 如 下 。 


(1) 创建 HTML 文件 ， 代 码 如 下 : 


<1IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"™ /> 

<title> 判 断 字 符 串 是 否 合 法 </title> 

</head> 

<body> 

<form action="" method="post"™" name="myform" lid="myform"> 
<input type="text™" name="txtSstring"> 
<input type="button” value=" 栓 音 " 
onClick="1sRight (document .myform.txtSstring.value}) "> 

</form> 

</body> 

</html> 


(2) 在 HTML 文件 的 head 部 分 ， 骨 入 JavaScript 代码 ， 具 体 如 下 : 
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< el 
function 1isRight (subChar) 
L 
Var findCchar="abcdefghi]Jklmnopqrstuvwxyz1234567890 —"; 
for (Var 1=0;1i<subChar.length;1++) 


1 
1f (findChar.indexOf (supCchar .CharRAt (11 )==-—1) 
[ 
alert (" 你 的 字符 串 不 合法 ") ; 
returns 
} 
} 
alert ("你 的 字符 串 合 法 ")，; 
} 
< Eps 


(3) 为 “检查 ”按钮 添加 单 击 onclick 事件 ， 调 用 计算 isRight 函数 ， 将 HTML 文件 中 
的 这 一 行 代 人 码 <input type="button" value=" 检 ”但 "> 修 改 成 如 下 所 示 代 但 : 


<input type="button™” value=" 检 奏 " 
onClick="1sR1ight (document .myform.txtSstring.value) "> 


在 浏览 器 中 打开 网 页 文件 chapter10.3.html， 页 面 效 果 如 图 10-3 所 示 。 


六 ”判断 字符 齐 是否 合法 x Mt 
Ca (D 127.0.0.1:8848/chiQ0/chapter10.3.htm 旺 码 [是 
Injcit2018 | 检 得 | 


(a) 
10-3 ”实例 10.3 的 页 面 效 果 
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种 判断 字符 索 星 否 合法 x WW \ 
© | © 127.0.0.1:8020/ch10/chapter10.3.html 


njcit2018 127.0.0.1:8020 显示 


你 的 字符 串 合 法 


(b) 输入 合法 字符 串 


GS | 127.0.0.1:8020/ch1i0/chapter10.3.htm 


zhangsan@njcitcn 127.0.0.1:8020 显示 


你 的 字符 串 不 合法 


(co) 输入 不 合法 字符 品 
图 10-3 ”实例 10.3 的 页 面 效果 ( 续 ) 


AS 10.5 Math 对 象 


在 JavaScript 中 ， 通 利 会 对 数值 进行 处 理 ， 为 了 便于 操作 ， 内 置 了 大 量 的 属性 图 数 ， 例 
如 ， 求 绝对 值 和 整数 等 。 
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在 JavaScript 中 ， 用 Math 表示 数学 对 象 。Math 对 象 不 需要 创建 ， 可 以 直接 使 用 。Math 


对 象 钊 用 属性 如 表 10-4 所 示 。 
表 10-4 ” Math 对象 的 属性 

属 说 明 
E 返回 算术 常量 e， 即 自然 对 数 的 底 ( 约 等 于 2.718) 
LN2 返回 2 的 目 然 对 数 ( 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 ( 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.414) 
LOGI10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0.434) 
PI 返回 圆周 率 ( 约 等 于 3.14159) 
SQRT] 2 返回 2 的 平方 根 的 倒数 ( 约 等 于 0.707) 
SQRT2 返回 2 的 平方 根 ( 约 等 于 1.414) 


A 注意 : Math 对 象 的 属性 ， 只 能 读 取 ， 不 能 对 其 赋值 ， 即 只 读 型 属性 ， 并 且 属 性 值 是 固定 的 。 
Math 对 象 的 函数 如 表 10-5 所 示 。 


函数 


abs(X 
acos(X) 
asin(Xx 
atan(X 
atan2(V.x 
cell(x 
COS(X 
exp(X 
floor(x) 
log(x 
max(x, 
Min(X, 
jOW (X 
random( 
round(x 
saqrt(X 
tan(X 
toSource() 


valueOf( 


表 10-5 Math 对 象 的 函数 


说 了 明 
返回 x 的 绝对 值 
返回 x 的 反 余弦 值 
返回 数 的 反正 弦 仁 


以 介 于 -PL2 与 PV2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 
返回 从 x 轴 到 点 (x,y) 的 角度 ( 介 于 -PL2 与 PL2 弧度 之 间 ) 
对 XxX 进 行 上 舍 入 

返回 x 的 余弦 

返回 e 的 指数 

对 x 进行 下 舍 入 

返回 x 的 自然 对 数 ( 底 为 @) 

返回 x 和 y 中 的 最 高 值 

返回 x 和 y 中 的 最 低 值 

返回 x 的 y 次 村 

返回 0~1 之 间 的 随机 数 

把 x 四舍五入 为 最 接近 的 整数 

返回 x 的 平方 根 

返回 角度 x 的 正切 

返回 该 对 象 的 源 代码 

返回 Math 对 象 的 原始 值 
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【实例 10.4】 设计 程序 ， 单 击 “ 随 机 数 ” 按 钮 ， 使 用 Math 对 象 的 random 函数 ， 产 生 


一 个 0 一 100 之 间 ( 仿 0，100) 的 随机 整数 ， 并 在 对 话 框 中 显示 ， 如 图 10-4(1) 所 示 。 单 击 “ 计 
算 ” 按 钮 ， 计 算 该 随机 数 的 平方 、 平 方 根 和 对 数 ， 保 留 2 位 小 数 ， 并 在 对 话 框 中 显示 ， 如 
10-4(2) 所 示 。 有 具体 操作 步骤 如 下 。 


(1) 创建 HIML 文件 ， 代 码 如 下 : 


<IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"™ /> 

<title> 随 机 产生 整数 ， 并 计算 其 平方 、 平 方 根 和 自然 对 数 </title> 

</head> 

<body> 

<form action="™" method="post"™" name="myform" id="myform"> 
<input type="button™" value=" 随 机 数 " > 
<inrut type—"button™” valaem" 计 算 " 3 

</form> 

</section> 

</body> 

</html> 


(2) 在 HTML 文件 的 head 部 分 ， 通 入 JavaScript 代码， 如 下 所 示 : 


< erlpt> 
var data; // 声 明 全 局 变量 ,保存 随机 产生 的 整数 
/* 随 机 数 函 数 */ 
function getRandom()t 
qdata=Math .floor (Math.random(})*101); //0~100 产生 随机 数 
alert ("随机 整数 为 "+data); i 
} 
/* 随 机 整数 的 平方 、 平 方 根 和 自然 对 象 */ 
function cal(})t 
Var square=Math .pow (data, 2); / /计算 随机 整数 的 平方 
var squareRoot=Math.sqrt (data) .toFixed (2); // 计 算 随 机 整数 的 平方 根 
var logarithm=Math.log(data) .toFixed (2);  ”// 计 算 随 机 整数 的 自然 对 数 
alert ("随机 整数 "+qdata+" 的 相关 计算 \n 平方 \t 平方 根 \t 自然 对 数 
\n"+squaret+"™\t"+squareRoot+"™\t"+logarithm); 
/ /输出 计算 结果 
} 
</script> 


(3) 为 检查 按钮 添加 单 击 onclick 事件 ， 将 HTML 文件 中 的 以 下 两 行 代码 : 


<input type="button"™ value=" 随 机 数 " > 
<input tye="button™ value="t| 得 > 


修改 成 如 下 所 未 代码 : 


<input type="button"” value=" 随 机 数 " onClLick="getRandom () "> 
<irnit: type—"Button™" valne=" 计 算 ” onClicek—"cal() "> 


(4) 保存 网 页 ， 浏览 最 终 效 果 。 在 浏览 器 中 打开 网 页 文件 chapter10.4.html， 页 面 效 果 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


如 图 10-4 所 示 。 


器 项 机 产生 整数 ， 并 计算 宇 x 


GG | 四 127.0.0.1:8020/ch10/chapter10.4.html 


| 计算 | 127.0.0.1:8020 显示 


随机 整数 为 : 24 


(a) 产生 随机 整数 


| 日 | 
站 “随机 产生 玛 数 ， 并 计算 其 平方 . = X 十 0 
人 加 12700.1:8848/ch10/chapter10.4.htmnl 已 古旧 : 
本 127.0.0.1:8848 显示 
随机 整数 45 的 相关 计算 
平方 平方 根 自 然 对 数 
20256.713.81 


(b) 计算 随机 整数 的 平方 、 平 方 根 和 自然 对 数 
图 10.4 实例 10.4 的 页 面 效 果 


Sa 10.6 Array 对 象 


数组 是 有 序数 据 的 集合 ，JavaScript 中 的 数组 元 素 允 许 属于 不 同 数 据 类 型 。Array 对 象 
用 来 操作 JavaScript 中 的 数组 。 
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数组 对 象 使 用 Array， 创 建 对 象 有 三 种 方法 。 

(1) 创建 一 个 长 度 为 零 的 数组 : 

var 数组 名 = new Array 1(); 

例如 ， 声 明 数 组 为 myArrl1， 长 度 为 0， 代 码 如 下 : 

Var myArrl = new Arrayl}: 

(2) 创建 一 个 长 度 为 n 的 数组 : 

Var 数组 名 = new Array (n): 

例如 ， 声 明 数 组 为 myAr2， 长 度 为 $， 代 码 如 下 : 

var myRArr2 = new RARrravV(5); 

(3) 创建 一 个 指定 长 度数 组 ， 并 赋值 : 

var 数组 名 = new Array[【 元 素 1， 元 素 2， 元 素 3，.): 

例如 ， 声 明 数 组 为 myAr3， 分 别 赋值 为 1、2、3、4， 代 码 如 下 : 

var mArr3 = ew hrravyills 2 3, Ws 

上 面 这 一 行 代码 ， 创 建 一 个 数组 myAr3， 并 且 包 含 四 个 元 素 ， 分 别 为 myArr3[0]、 
myArr3[1]、myArr3[2]、myArr3[3]， 这 四 个 元 素 值 分 别 为 1、2、3、4。 

Array 对 象 除了 可 以 创建 数组 外 ， 还 为 数组 操作 提供 了 很 多 便利 的 属性 和 方法 。Array 
对 象 封 竣 的 属性 如 表 10-6 所 示 。 

表 10-6 ”Array 对 象 的 属性 


属 性 说 明 
constructor 返回 对 创建 此 对 象 的 数组 沙 数 的 引用 
leneth 设置 或 返回 数组 中 元 率 的 数目 

rototype 使 您 有 能 力 回 对 象 添 加 属性 和 方法 


此 外 ，Array 对 象 还 提供 了 一 系列 的 方法 用 来 操作 和 遍历 数组 ， 如 表 10-7 所 示 。 
表 10-7 Array 对 象 的 函数 


并 数 说 明 
concat( 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 
Iomn( 把 数组 的 所 有 元 素 放 入 一 个 字符 串 。 元 素 通 过 指定 的 分 隔 符 进行 分 隔 
yop( 删除 并 返回 数组 的 最 后 一 个 元 素 
yush() 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
shift( 删除 并 返回 数组 的 第 一 个 元 素 
slice( 从 某 个 已 有 的 数组 返回 选 定 的 元 素 
Sort 对 数组 的 元 素 进行 排序 
spliceQ) 删除 元 素 ， 并 癌 数 组 添加 新 元 素 
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续 表 
细 ” 数 说 明 
toSource() 返回 该 对 象 的 源 代码 
toString( 把 数组 转换 为 字符 串 ， 并 返回 结果 
toLocaleStrine() 把 数组 转换 为 本 地 数组 ， 并 返回 结果 
unshift( 向 数 组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
valueOfO 返回 数组 对 象 的 原始 值 
【实例 10.5】 使 用 Array 对 象 创建 数组 ， 文 件 名 为 chapter10.5.html， 上 有 具体 操作 步 又 


如 下 。 
(1) 创建 HTML 文件 ， 代 码 如 下 : 


<1IDOCTYPE html» 
<html> 
<head> 
<meta charset="UTF-—8"»> 
<title> 使 用 Array 对 象 创 建 数 组 </title> 
</head> 
<body> 
</bhody> 
</html> 


(2) 在 HIML 文件 的 head 部 分 ， 钦 入 JavaScript 代码 ， 具 体 如 下 : 


LE 六 
Var a = new Array(); 
a[0|=10; 
a[l|=20; 
a[l2|="abc™; 
document .write ("数组 a 的 元 素 为 :") ; 
document .write (a[0]+"");// 输 出 第 1 个 数组 元 素 的 值 
document .write (a[1]+"”");// 输 出 第 2 个 数组 元 素 的 值 
document .write (a[2]+"<br/>") ;// 输 出 第 3 个 数组 元 素 的 值 
var b = new Array(10,20,30);// 创 建 数组 bp， 共 3 个 元 素 
document .write ("数组 b 的 元 素 为 :"); 
document .write (b.tostring ()}+"<br/>"); 
Var C= Tew Array (4); 
document .write ("数组 c 的 元 素 为 :") ; 
c[0]="It's"; // 给 第 1 个 元 素 赋 值 
c[1]="an array";// 给 第 2 个 元 素 赋 值 
c[2]="of";/// 给 第 3 个 元 素 赋值 
c[3]="string";/// 给 第 4 个 元 素 赋值 
for (var i=0;i<c.length;i++) // 使 用 for 循环 遍历 数组 
document .write (c[i]+™ ™); 
到 全 


(3) 保存 网 页 ， 运 行 效果 如 图 10-5 所 示 。 
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六 ”使 用 Array 对 铺 创 建 数 组 x WF 
(> 各 12i70.0.,1 e | | S / 站 了 1 "nanpte = 于 站 二 下 a 他 © 


数组 a 的 元 囊 为 :10 20 abc 
数组 b 的 元 素 为 :10,20,30 
数组 c 的 元 素 为 :It's an array of string 


图 10-5 ”三 种 方法 创建 数组 的 页 面 效果 


【实例 10.6]】 使 用 for...in 循环 遇 历 数组， 文件 名 为 chapter10.6.html。 裔 历 是 指 按 顺序 
访问 每 个 元 系 。for...in 循 坏 可 以 所 历 对 象 的 属性 ， 也 可 以 遍历 数组 元 系 。 本 例 通 过 所 历数 
组 ， 找 到 其 中 的 最 大 值 并 输出 。 其 中 script 部 分 的 内 容 如 下 : 


<sScript type="text/JavaSscript"> 
function find max number (array) 


[ 
if(array == nul1) return null; 
if(! (array linstanceof Array) ) return null]l; 
if (array.length == 0) return null; 
Var max = array[0|]; 
for (Var index In array) 
{ 
if (array[index] > max) 
max = array[index]; 
} 
return max; 
} 
</script> 
区 全 本人 下 二 六 


Var a = new Arrayl(ll,12,13,20,85,23,21,952,19); 

document .write ("数组 ”+ a + "的 最 大 值 : " + find max number (a)); 

document .write ("<br />"); 

a[3] = 100; / /添加 新 的 数组 元 素 

document .write ("数组 " + a + "的 最 大 值 : " + find max number (a)); 
</s5cript> 


保存 网 页 运行 效果 如 图 10-6 所 示 。 
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j 口 过 万 区 得, 找 最 大 什 x 
| (> 加 127.0.0.1 “eeni0 chapte 10 6 htn re 


| 吉 旨 11.12.1320.85232152.19 的 用 大 人 85 
数组 11.12.13.100.85.23.21.52.19 的 最 大 值 ，100 


图 10-6 ”数组 求 最 大 值 的 页 面 效 果 


【实例 10.7】 对 数组 进行 排序 ，Array 对 象 提供 了 sort0 方 法 ， 可 以 将 数组 元 素 按 
Unicode 编码 从 小 到 大 排序 。reverse0 方 法 则 可 以 颠倒 数组 元 聚 的 顺序 。 本 实例 使 用 sortO 
方法 和 reverse0 方 法 实现 数组 元 素 升 序 以 及 降序 排列 ,文件 名 为 chapter10.7.html, 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 对 数组 进行 排序 </title> 
<stript> 
<script type="text/Javascript"> 
{ 
Var cars = new Arrayl(); 
cars.push("saab" ,volvo, "bmw", "opel"™).; 
document .write ("cars 数组 ; " + cars + "<br Fe i 
Cars Sortl):; 
document .write ("cars 数组 升序 排列 : " + cars + "<br />"); 
CAars.reversel(); 
document .write ("cars 数组 降序 排列 : " + Sarstls 
1(}s 
</Scripty> 
</head> 
<body> 
</body> 
</html> 


保存 网 页 运行 效果 如 图 10-7 所 示 。 
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/中 对 数组 进行 捧 序 x We 
(> | OD 127.00.1:8020/ch1i0/chapter10.7.htm 广 
cars#92 有 , saab,volvo,bmw.opel 


cars 数 组 升序 排列 ，bmw,opel,saab,volvo 
cars 孝 组 降序 排列 ， volvo, saab, opel,braw 


图 10-7 对 数组 进行 排序 的 页 面 效 果 
“10.7” 回 到 工作 场景 


通过 10.3 一 10.6 看 内 容 的 和 学习， 已 经学 习 了 Date 对 象 、String 对 象 、Math 对 象 和 Array 
对 象 ， 掌 握 了 使 用 Date 对 象 实现 当前 日 期 、 使 用 String 对 象 实现 用 户 名 和 密码 的 有 效 性 判 
上 条、 使 用 Math 对 象 实现 数值 处 理 、 使 用 Array 对 象 实现 数组 。 下 面 回 到 前 面 介 绍 的 工作 场 
景 中 ， 完 成 工作 任务 。 
【工作 过 程 一 】 创建 动态 实时 数字 时 钟 ， 文 件 名 为 chapter10.8.html， 具 体操 作 步 又 如 
下 所 示 。 
(1) 创建 HIML 文件 ， 代 人 码 如 下 : 


<Troctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 动 态 时 钟 显示 </title> 
</head> 
<body> 
<body> 
<diy 1d="cLlLock™> 
</d1iv> 
</body> 
</html> 


(2) 在 HIML 文件 的 head 部 分 ， 添 加 <style> 内 容 如 下 : 


<style type="text/css"> 
#cClockIt 
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width:400px; 
height :200px; 
font—-size:4spt; 
background-color:firebrick; 
margin:0 auto; 
font—-welilght :bolder; 
Color:#FFO; 
line-height:200px; 
text-align:center; 
} 
</style> 


(3) 在 HIML 文件 的 head 部 分 ， 添 加 JavaScript 代码 ， 具 体 如 下 : 


<script type="text/JavaSscript"> 
function timeshow()t 
Var d = new Date(); 
Var h = d.getHours () ; 
Var m = d.getMinutes (); 
Var 3 = d.getseconds (}; 
art = 
document .getElementById ("clock") .innerHTML=t; 
setTimeout ("timeshow ()",1000); //1 秒 后 再 执行 timeshow () 函数 
} 
ee 


(4) 在 HTML 文件 的 body 部 分 ， 添 加 JavaScript 代码 ， 具 体 如 下 : 
<script type="text/JavaSscript"> 
timeshow (); 
</script> 
页 面 效 果 如 图 10-8 所 示 ， 其 中 CSS 部 分 是 修饰 div 显示 效果 ，setTimeout0 方 法 用 于 在 
肯定 的 坚 秒 数 后 调用 函数 或 计算 表达 式 ，1000 坚 秒 表示 1 秒 。 


口 村 x 也 


(> | © 127.0.0.1:8020/ch10Achapter10.8.htm 


10-8 动态 显示 当前 时 间 (1) 
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修改 上 述 程序 ， 加 上 年 月 日 : 


Var Year = d.getrullYear(}; 
Var month = d.getMonth ()+l1; 
Var day = d.getDate (};，; 


得 到 的 结果 如 图 10-9 所 示 。 


\ 
ml 


GG | © 127.0.0.1:802! 


让 动态 时 钟 显示 x \ 


2018 年 7 月 2 日 10 : 36 :20 


10-9 动态 显示 当前 时 间 (2) 


【工作 过 程 二 】 设计 程序 ， 验 证 用 户 名 和 密码 格式 ， 要 求 用 户 名 仅仅 包含 数字 和 字母 ， 
要 求 密码 长 度 不 低 于 6 位 ， 如 果 不 正 确 ， 弹 出 对 话 框 显示 错误 ， 文 件 名 为 chapter10.9.html。 
体操 作 步 又 如 下 : 

(1) 创建 HIML 文件 ， 代 码 如 下 : 


<1 DOCTYEE html» 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 判 断 用 户 名 和 密码 </title> 
</head> 
<body> 
<form 1id="forml™ name="form]l™" method="post™ action="2.htm]l™ > 
用 户 名 : 
<label> 
<input name="name™" type="text"™" id="name™" /> 
</label> 
<p> 窗 &gnbsp;&nbsp; 个 ; 
<label> <input name="password™ type="text"™ id="password™" /> </label> 
</p> 
< 
<label> <input type="submait" name—"Subait™ value=" 提 "> </labels 
<jp> 
</form> 
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</body> 
</html> 


(2) 在 HTML 文件 的 head 部 分 ， 添 加 JavaScript 代码 ， 如 下 所 示 : 


<script language="Javascript"> 
function 士 ] () 


{ 
Var name=document.forml .nanme .value; 
Var password=aocument .torml .password.value; 
for( var 1=0;i<name.length;1++) 
| 
Var W=name .CharaAt (11) ; 
if( 1 ((w>="O0"'&E&Ww<="9)|| (w=—="a teEw<="2z || (w="A' Esw<="'2") }) 
{ 
alert ("用 户 名 中 有 不 合法 字符 "); 
return false; 
} 
} 
1f (password.1lengthn<6) 
L 
alert ("密码 少 于 6 位"); 
return false; 
} 
return true; 
} 
</f sacripl> 


(3) 为 检查 按钮 添加 单 击 onclick 事件 ， 将 HTML 文件 中 的 代码 <input type="submit" 
name="Submit" value=" 提 区" 放 > 修改 成 如 下 代码 : 


<1i00t type="aubmit” name="submit"™ valtie=" 提 区 " onclieg= "Ej (0 "> 


运行 此 文件 ， 其 页 面 效 果 如 图 10-10 所 示 。 


/ D WAS x \ 中 MAREE x) [ HARPEMEN x\ 
> 已 | 加 127.00.1 10/chapterl0 9 htr i 

用 尸 名 :test 

密 码 ， wn 

| 提交 


10-10 判断 用 户 名 和 密码 
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【工作 过 程 三 】 网 站 为 了 防止 用 户 利用 机 器 人 目 动 注册 、 登 录 、 灌 水 ， 采 用 了 验证 人 码 
技术 。 所 谓 验 证 三 ， 融 是 将 一 串 随 机 产生 的 数字 或 符号 生成 一 幅 图 片 ， 绸 在 图 片 里 加 上 一 
些 干扰 元 喜 ( 防 止 OCR)， 需 要 用 户 肉 眼 识 别 其 中 的 验证 但 信息 ， 并 输入 表单 提交 网 站 验证 ， 
验证 成 功 后 才能 使 用 茶 项 功能 。 本 例 主 要 产生 一 个 4 位 的 数字 验证 码 。 文 件 名 为 
chapter10.10.htm1， 有 体操 作 步 又 如 下 所 示 。 

(1) 创建 HTML 文件 ， 代 码 如 下 : 


<1IDOCTYEE HTML> 

<html> 

<head> 

<meta http-—equiv="Content—Type™" content="text/htm]l; charset=utf-—8"™> 
<title> 生 成 4 位 随机 数 </title> 

</head> 

<body> 

<span lid="msg"></span> 

<input type="button"” value=" 生 成 4 位 随机 数 " > 


</body> 

</html> 

(2) 在 HIML 文件 的 head 部 分 ， 骨 入 JavaScript 代码 ， 具 体 如 下 : 
<seript»> 


function change() { 
Var str=""™;} 
for{var 1=07;1<4;1++}1 
stri+=Math.floor (Math.random()*]10); 
document .getElementById ("msg") .innerHTML=str; 


} 

< StCrEBtS 

(3) 为 检查 按钮 添加 单 击 onclick 事件 ， 将 HIML 文件 中 的 代码 <input type="button" 
value=" 生 成 4 位 随机 数 "> 修改 成 如 下 所 示人 代码 : 


<input type="button" value=" 生 成 4 位 随机 数 " onClick=" change () ”> 


(4) 保存 网 页 后 ， 可 查看 效果 如 图 10-11 所 示 。 


A 注意 : (1) ”Math.floor0 远 数 和 Math.round0 〇 函数 的 区 别 ，Math.floorGINumber): 返回 小 
于 等 于 数字 参数 INumber 的 最 大 整数 ; Math.round(iNumber): 返回 与 数值 表达 
式 INumber 最 接近 的 整数 (四 舍 五 入 )。 

(2) 修改 script 部 分 的 程序 ， 生 成 4 位 数字 和 字母 组 合 的 验证 而 。 


function change() { 
/* 验 证 码 中 可 能 包含 的 字符 */ 
Var str="abcdefghijklmnopgqrstuvwxyZzZABCDEFGHIJKLMNOPQRSTUVWXYZ20123456789"™; 
Var ret=""; // 保 存 生成 的 验证 码 
/* 利 用 循环 ， 随 机 产生 验证 码 中 的 每 个 字符 *y 
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for (var 1=0;1<4;1++) 
lL 
var index=Math.floor (Math.random()*62); /7 随机 产生 一 个 0 一 62 之 则 的 数字 
ret+=str.charAt (index);  // 将 随机 产生 的 数字 当 作 字符 串 的 位 置 下 标 ， 在 字符 
串 s 中 取出 该 字符 ， 并 入 ret 中 
} 
document .getElementById ("msg") .innerHTML=ret; 
} 
< /erinty 
/DBA x 
CG 127.0.0.1:8020/ch1i0/chapter10.10.html 


7897 | 生成 4 位 随机 数 


10-11 ”刷新 生成 4 位 数字 验证 码 
生成 的 随机 验证 码 如 图 10-12 所 示 。 


mals) 本 bE | 
六 ”生成 4 位 随机 数 x 〈 千 
GG © 127.0.0.1:8020/chi0/chapter10.10.html Qt 


10-12 ”刷新 生成 4 位 数字 和 字母 验证 码 


【工作 过 程 四 】 用 下 拉 列 表 选 择 课程 ， 文 件 名 为 chapter10.11.html， 内 容 如 下 所 示 : 
创建 HIML 文件 ， 代 码 如 下 : 
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<IDOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title> 下 拉 列 表 选 择 课程 </title> 

</head> 

<body> 

<form name="forml™"> 

<Select name="s1l"™ 1d="s1"> 
<option>Java 程序 设计 </option> 
<option> 数 据 结 构 </option> 
<option> 移 动 Web 技术 </option> 

</select><br/> 

<textarea name="textareal™ 1d="textareal™ rows="8™ cols="30"> 

在 这 里 为 你 介绍 课程 

</textarea> 

</body> 

</html> 


在 HTML 文件 的 head 部 分 ， 柑 入 JavaScript 代码 ， 如 下 所 示 : 


<SPt»> 


为 下 拉 列 表 添加 onChange0 事 件 ， 将 HTML 文件 中 的 代码 


<Select name="™sl™ 1d="s]™ > 


修改 成 如 下 所 不 代码 : 


<select name="sl"™" 1q="s1" onChange="change ();"> 


保存 网 页 ， 运 行 结果 如 图 10-13 所 示 。 


Y Vi 
/上 下 拉 列 囊 选 择 课程 其 AN \ 


SG | © 127.0.0.1:8020/chl0/chapter10.11.html 


| Java 程 序 设 计 ” 讲 教师 : 尾 老 师 
数据 结 村 术 1761 软件 技术 


移动 web 技 术 


10-13 ”用 下 拉 列 表 选 择 课程 
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【实例 10.8】 设计 程序 ， 用 数组 实现 动态 显示 时 间 ， 文 件 名 为 chapter10.12.html， 内 容 
如 下 。 
(1) 创建 HTML 文件 ， 代 码 如 下 : 


<IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"™ /> 
<title> 动 态 时 人 钟 </title> 
eerintk See="eloekE. Ts" eerint> 
</head> 

<body> 

<hl id="date"></hl1l> 
<span lid="msg"></span> 
</body> 

</html> 


(2) 新 建 JavaScript 文件 ， 保 存 文件 名 为 clock.js， 保 存在 与 HIML 文件 对 应 的 位 置 ， 
在 clock.js 文件 中 骸 入 如 下 代码 : 


function ShowDateTlme ()f{ 

var ee = ne NeravyivH™ Ym WO Bn 
/ /声明 数组 存储 一 周 七 天 

var mbDate = new Late(}: /7/ 当天 的 日 期 

Var sYear = myDate.getrFullYear (); 上 年 

Var SMonth = myDate.getMonth()+l1; ff 月 

Var sDate = myDate.getDate () ; rr 日 

var sDay = sWeek[myDate.getDay()];  // 根据 得 到 的 数字 星期 利用 数组 转换 成 汉字 星期 
Var h=myDate .getHours ():  // 小 时 

var m=myDate.getMinutes(); // 分 钟 

var s=myDate.getSeconds(); // 秒 钟 


/ /输入 日 期 和 星期 
document .getElementById ("date") .innerHTML= (sYear + "年 " + sMonth + "月 " + 
sDate 十 日” 二 ”里 则 ”+ sDay + "<br>")? 
h=formatTwoDigits (h) // 格 式 化 小 时 ， 如 果 不 足 两 位 前 补 0 
m=formatTwoDigits (m) /7/ 格 式 化 分 钟 ， 如 果 不 足 两 位 前 补 0 
s=formatTwoDigits(s) // 格 式 化 秒 钟 ， 如 果 不 足 两 位 前 补 0 
// 显 不 有 时间 
document .getElementById ("msg") .innerHTML= (lmageDigits (h) + "<img 
src="images/dot .png'>™ + 
imageDigits({(m) + "<img src="images/dot .png'>™ + 
imageDigits(s) + "<br>"),，; 
setTimeout ("showDateTime ()",1000); // 每 秒 执行 一 次 showDateTime 函数 
} 
window.onload=showDateTime; // 页 和 面 的 加 载 事 件 执行 时 ， 调 用 函数 


/ /如 果 输 入 数 是 一 位 数 ， 在 十 位 数 上 补 0 


function formatTwoDigits(s) { 
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1f (S<10) return "0O"+s; 
else return ss: 


} 


/ /将 数 转换 为 图 像 。 注 意 ， 在 本 文件 的 相同 目录 下 已 有 0 一 9 的 图 像 文 件 ， 文 件 名 为 0.png,1.png，… 
/ /以 此 类 推 
function imageDigits(s) 1{ 

Var ret = ™™; 

Var ss = new String(s}); 

For (ar TD T*5. Temiths L153 | 

Fret += <1mg Sre="1mMgqesf" + S.CharBnE(sy + “五 站 可 
} 


return ret-: 


在 clock.js 文件 中 ，showDateTime 函数 主要 用 于 产生 日 期 和 时 间 ， 并 且 对 日 斯 和 时 间 
进行 格式 化 ，formatTwoDigits 函数 是 将 一 位 的 日 期 或 时 间 前 面 补 0 变 成 两 位 。 


sa 10.8 工作 实 训 营 


10.8.1 训练 实例 


1. 训练 内 容 

完成 一 个 购物 简易 计算 器 , 实现 加 减 乘除 几 种 运算 .用 DIV 布局 , 结合 前 面 学 过 的 CSS 
技术 ， 界 面 美 观 。 

2. 训练 目的 


> ”掌握 Math 对 象 的 使 用 。 

> 掌握 如 何 获 取 表 单 信息 。 

> 掌握 如 何 对 获得 的 表单 信息 进行 处 理 。 
3. 训练 过 程 

参照 10.5 节 中 的 操作 步骤 。 

4. 技术 要 点 


注意 Math 对 象 中 各 种 处 理 数 字 的 方法 。 


10.8.2 ”工作 实践 常见 问题 解析 


【 季 见 问题 1】JavaScript 中 的 对 象 的 创建 方式 有 了 哪 几 种 ? 
【 答 】JavaScript 是 一 种 “基于 prototype 的 面 回 对 象 语 言 ”， 与 Java 有 非常 大 的 区 别 ， 
无 法 通过 类 来 创建 对 象 。 主 要 创建 方式 有 如 下 三 种 。 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


(1) 通过 “字面 量 ” 方 式 创建 。 
方法 : 将 成 员 信 息 写 到 个 中 ， 并 赋值 给 一 个 变量 ， 此 时 这 个 变量 就 是 一 个 对 象 。 
例如 : 


Var person = (name: 'dong]jc’', work:function() {console.1log('write coding')}); 


如 朱 仓 中 为 宪 ， 则 将 创建 一 个 空 对 象 : 

var person = {} // 创 建 空 对 象 

演示 代 但 : 

<Script type="text/Javascript"> 

Var person = 1 
name: vdong]jc™, 

age: 32， 

Introduce: function () {alert ("Myname 1s "+this.name + "Tm™+this.age});)]) 
}; 

Person -Introduce (}); 

seripnt> 

我 们 还 可 以 给 对 象 丰 富 pa 
对 象 . 成 员 名 称 = ， 骨 : 
对 象 [成 员 名 称 ] = 值 ; 

也 可 以 获取 对 象 的 成 员 信息 
对 象 .成 员 名 称 ; 
对 象 [ 成 员 名 称 ]: 


<sScript type="text/Javascript"> 


var person = 1 

name: "dong]jce"; 

AaQe: 32, 

Introduce: function () { alert ("My name 1S " + this.name + "I'm "+ 
this. aqals 3 

}; 
person.worker = "coding'; // 丰 富 成 员 信息 


< Accripnt> 
(2) 通过 “构造 函数 ”方式 创建 。 
方法 : 


var Ob] = new 函数 名 (); 


这 与 通过 类 创建 对 象 有 本 质 的 区 别 。 通 过 该 方法 创建 对 象 时 ， 会 目 动 执行 该 函数 。 这 
凡 类 似 于 PHP 通过 创建 对 象 时 ， 会 目 动 调用 构造 疯 数 ， 因 此 该 方法 称 为 明 过 “构造 函数 ， 
方式 创建 对 象 。 

<sScript type="text/Javascript"> 


function Person() 1 


this.name = “dongije™: / /通过 this 关键 字 设 置 默认 成 员 
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Var worker = "coding' 7 // 没 有 this 关键 字 ， 对 象 创建 后 ， 该 变量 为 非 成 员 
this.age = 32; 
this.Introduce = function () 1 

alert ("My name 1s "十 this.name + "-IIm "+ this.age).; 


}; 

alert ("MY name jis " + this.name + "-I'm "+ this.age); 
}; 
var person = new Person () : 


Person.Introduce (1 ， 


</acript> 
此 代码 一 共 会 两 次 弹出 对 话 框 ， 原 因 在 于 创建 对 象 时 目 动 执行 了 该 函数 。 
性 注意 ; this 关键 字 的 使 用 。 这 里 的 this 与 PHP 中 语法 意思 类 似 ， 指 调用 该 函数 的 对 象 ， 

这 里 指 的 是 person。 

(3) 通过 object 方式 创建 。 

方法 : 先 通 过 object 构造 器 创建 一 个 对 象 ， 峙 往 里 丰富 成 员 信 息 。 

Var ob] = new Object(); 

实例 代码 : 


<script type="text/Javascript"> 
Var person = new Object (); 


person.name = "dong]jc"™; 
person.age = 32; 
person.Introduce = function () 1 


alert ("My name 1s "二 this.name + “.I'm " + this.age); 
}; 
person. Tniroducel}s 
二 


【第 见 问题 2】JavaScript 中 的 对 象 是 不 是 都 必须 要 先 创建 ， 由 使 用 ? 

【 答 】Math 对 象 不 需要 创建 ， 可 以 直接 使 用 ， 而 其 他 的 Date 对 象 、String 对 象 、Array 
对 象 要 创建 册 使 用 。Math 对 象 是 JavaScript 中 内 置 的 一 个 全 局 对 象 ， 它 主要 提供 一 些 基 本 
的 、 第 用 的 数学 图 数 和 第 数 。Math 对 象 上 均 是 评 态 函数 和 前 态 弟 量 属 性 ， 因 此 Math 对 象 
没有 构造 函数 ， 也 不 雷 要 创建 它 ， 直 接 使 用 Math 的 属性 和 方法 即 可 。 


10.9 ”本 章 小 结 


JavaScript 对 象 可 以 看 作 是 属性 的 无 序 集合 ， 每 个 属性 加 是 一 个 键 什 对， 可 增 可 删 。 
JavaScript 中 的 所 有 事物 都 是 对 象 : 字符 串 、 数 字 、 数 组 、 日 期 ， 等 等 。 

JavaScript 对 象 除了 可 以 体 持 目 有 的 属性 外 ， 还 可 以 从 一 个 称 为 原型 的 对 象 继 不 属性 。 
对 象 的 方法 通常 是 继承 的 属性 。 这 种 “原型 式 继承 ”是 JavaScript 的 核心 特征 。 
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六 2 10.10 习题 


1]. 在 JavaScript 中 ， 把 字符 串 “123” 转换 为 整 型 值 123 的 正确 方法 是 (  ). 


A war St 一 123 B. var str—"123"™ 
var num=(Int)str: var num=str.parselInt(str); 
C. var st—"123"™ Dwr 123" 
var num=parseInt(str): var num=Integer.parselnt(str) 


2. ”假设 今天 是 2019 年 4 月 23 日 星期 二 ,请 问 以 下 JavaScript 代码 输出 结果 是 ( ” )， 


Var time = new Date( ) :; 
document .write (time.getMonth( ) ) ; 


A.3 B. 4 Ee D. 4 月 
3. ”分析 下 面 的 JavaScript 代码 段 ， 输 出 结果 是 ( ” )。 
Var mystring="I am a student™",; 


a=mystring.charAt (9); 
document .write (a); 


A.lama st BU C. Udent D.T 
4. ”以 下 可 以 获取 系统 当前 日 期 的 是 ( 。 ). 

A. var k = new Date( ): B. Date k = new Datel ) 

C. var k = new date( ) D. 以 上 说 法 均 不 对 


5. 关于 JavaScript 中 的 Math 对 象 的 说 法 ， 正 确 的 是 ( 和 
A. Math.ceil(512.51) 返 回 的 结果 为 512 
B. Math.floor( ) 方 法 用 于 对 数字 进行 下 舍 入 
C. Math.round(-512.51) 人 返回 的 结果 为 -512 
D. Math.random( ) 返 回 的 结果 范围 为 0-1， 包 括 0 和 1] 


1]. 在 JavaScript 中 ,可 以 使 用 Date 对 象 的 方法 返回 一 个 月 中 的 每 一 天 ， 
2. 和 若 想 生成 1~100 之 间 的 随机 数 ， 可 用 语句 : var num=Math. (Math. 


3. “JavaScript 动态 网 页 设计 技术 ”.substring(10.0) 的 返回 值 为 

三 、 操 作 题 

1. 秒杀 计时 器 : 输入 秒杀 时 间 单 击 “ 开 始 计 时 ”按钮 ， 则 开始 计时 (图 10-14)。 

2. 验证 用 户 名 和 敌 框 ， 要 求 用 尸 名 仅仅 含 数 字 和 字母 ， 要 求 获 友 长 度 不 低 于 6 位 ， 
如 果 不 正确 弹出 对 话 框 显示 错误 ( 见 图 10-15)。 

3.” 猜 数 游 戏 ， 猜 0~9 之 间 的 数字 ， 如 果 猜 中 的 话 显示 猜 了 几 次 ( 见 图 10-16)。 
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交口 和 Si 对 x 


一 1 


Ea file:ffD 剖 材 编 写 /HTML5 吉 村 /ch10%20Javascript 中 的 对 惫 / 课 后 习 古 /10.1/ 第 四 章 虎 型 例 古 1.ht..， 普 


10-14 ”秒杀 计时 器 效果 图 


交口 无 标题 六 档 
CG | @ fleyWD:/ 散 材 编写 /HTML5 教 材 /ch109620Javascriptr 中 的 对 念 / 课 后 习题 /10.2/ 验 证 .， 家 


用 户 名 : | | 
| 


10-15 ”用 户 登 录 效 果 图 


已 | 中 filey//Dy 台 材 编写 /HTML5 教 材 /ch103620Javascript 中 的 对 旬 / 课 后 习题 /10.2/ 锋 数字 html 


__ || 此 网 页 品 示 
成 功 了 ! 你 总 共 簿 了 2 次 


10-16 ” 猜 数 游戏 效果 图 


国 掌握 事件 处 理 机 制 。 
国学 握 表单 事件 的 使 用 。 
国学 握 溃 用 事件 的 灵活 使 用 。 
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Rw 11.1 工作 场景 村 入 


【工作 场景 

网 页 除了 能 显示 动态 页 面 效果 外 还 可 以 对 用 户 的 操作 进行 啊 应 ， 实 现 用 户 与 页 面 的 交 
互 ， 这 种 交互 通过 事件 处 理 来 完成 ， 例 如 下 拉 菜 单 的 级 联 效果 、 表 单 的 提交 重 置 、 用 户 按 
下 键盘 上 的 键 时 作出 啊 应 等 。 

下 面 需 要 制作 两 个 动态 效果 ， 其 中 ，《 模 拟 收 银 》 根 据 用 户 的 操作 有 不 同 的 啊 应 ， 实 
现 总 价 自动 计算 1 《日 期 级 联 菜 单 》 能 根据 用 户 选 择 的 月 份 自动 显示 这 个 月 份 的 所 有 日 供 
用 户 选择 ， 如 选择 3 月 ， 代 表 日 的 菜单 能 目 动 显示 1~31 个 菜单 项 。 

【引导 问题 】 

(1) 怎样 处 理 鼠 标 事件 ? 

(2) 怎样 处 理 键 盘 事 件 ? 

(3) 怎样 处 理 窗口 事件 ? 

(4) 怎样 处 理 表 单 事件 ? 


Sa 11.2 事件 与 事件 处 理 


11.2.1 事件 


用 户 在 通过 浏览 右 操 作 页 面 时 会 引发 各 种 事件 ，JavaScript 可 以 创建 动态 页 面 ， 事 件 是 
用 户 在 访问 页 面 时 执行 的 操作 ， 是 可 以 被 JavaScript 侦 测 到 的 行为 。 例 如 : 当 页 面 加 载 完毕 
时 会 触发 onload 事件 ， 用 尸 单 击 按钮 时 会 触发 onclick 事件 ， 用 户 在 键盘 上 按 下 茶 个 键 时 会 
触发 onkeydown 事件 ， 等 等 。 

事件 按照 触发 的 事件 源 可 以 分 为 窗口 事件 、 鼠 标 事件 、 键 盘 事 件 等 类 型 。 


11.2.2 调用 事件 处 理 程 友 
当 触发 某 个 事件 时 就 会 调用 相应 的 事件 处 理 程序 ， 语 法 如 下 : 


object.onEventName=eventHandler; 
其 中 : object 表示 事件 触发 的 对 象 ， 也 就 是 事件 源 ; onEventName 表示 事件 ; 
eventHandler 表示 触发 事件 时 要 调用 的 函数 ， 也 就 是 事件 处 理 程序 。 
【实例 11.1】 单 击 按钮 改变 背景 色 ， 文 件 名 称 为 chapterl1.1.html， 内 容 如 下 : 


<IDOCTYPE htmil> 
<html> 
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<head> 
<meta charset="utf-—8™ /> 
<title> 单 击 按钮 改变 背景 色 </title> 
</head> 
<body> 
<input type="button" value=" 粉 色 " 
1d="pink™" onclick="this.parentNode.bgColor="'pink'™" /> 


</body> 
</html> 
在 浏 贤 器 中 打开 网 页 文件 chapterl1.1.html, 吓 单 击 按钮 改变 背景 1 x 本 - 
页 面 效 果 如 图 11-1 所 示 ， 当 单 击 “粉色 ”按钮 C HN O127.0.0.1:8020/chap.. 家 :| 
时 页 面 背景 变 为 粉色 ，this 表示 onclick 事件 所 汇 应 用 口 | 
在 的 标签 ，parent Node 表示 此 节点 的 父 节点 。 ee ] 


如 果 页 面 要 做 三 个 按钮 ， 单 击 不 同 的 按钮 | 
显示 按钮 所 代表 的 背景 色 ， 可 以 把 事件 调用 程 
序 写 在 函数 中 。 | 

【实例 11.2】 单 击 不 同 按钮 显示 不 同 背 景 


， 文 件 名 称 为 chapter11.2.html， 内 容 如 下 : - 
色 ， 文 件 名 称 为 chapter 内 容 如 下 ER 


<IDOCTYPE html> 


<htm]l> 
<head> 
<meta charset="UTF-—8"»> 
<title> 单 击 不 同 按钮 显示 不 同 背 景色 </title> 
</head> 
<body> 
<input type="button” values—" 粉 色 "” id="pink™ /> 
<input tvype="button” valne-" 绿 色 " id="green™ /> 
<input type="atton"” varmme=" 黄 色 " id="yellow"™ /3 
< 
document .getElementById ("pink") .onclick=showBgcolor; 
document .getElementById ("green") .onclick=showBgcolor; 
document .getElementById ("yellow") .onclick=showBgcolor; 
function showBgcolor () { 
this.parentNode.bgColor=this.1d; 
} 
人 <script 
</body> 
</html> 


在 浏览 侯 中 打开 网 页 文件 chapter11.2.html， 页 面 效果 如 图 11-2 所 示 ， 当 单 击 不 同 按钮 
时 页 面 背景 变 为 相应 按钮 上 显示 的 颜色 ， 通 过 id 属性 值 获取 相应 的 按钮 元 素 ， 单 击 时 调用 
图 数 (事件 处 理 程序 )showBgcolor， 函 数 体 实现 育 景 变色 ， 通 过 把 id 属性 值 设 置 成 相应 的 色 
值 简 化 代码 。 代码 注解 : 

(1) document.getElementByld("pink") 

获取 id 属性 值 为 pink 的 元 素 。 
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(2) this.parentNode.bgColor=this.1d 

this: 触及 事件 处 理 程 序 的 事件 源 ， 也 惑 是 所 单 击 按钮 。 
parentNode: 该 节 氮 的 父 节 点， 也 丈 是 此 按钮 的 父 书 氮 body。 
bgColor: 背景 雇 色 属性 。 


口 单 击 不 同 按钮 显示 不 同 癌 x | 六 单 击 不 同 按钮 显示 不 同音 x 


(> 全 | © 127.0.0.1:8020/chapter11/cha.. 立 | CG 全 | © 127.0.0.1:8020/chapterll/cha... 完 
::: 应 用 口 


:3 应 用 六 


Ne [se [se 和 粉色 || 绿色 | 黄色 


图 11-2 单 击 不 同 按钮 显示 不 同 背 景色 页 面 效果 
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11.3.1 鼠标 事件 


鼠标 事件 就 是 用 户 使 用 鼠标 在 浏览 器 窗口 中 进行 某 个 操作 时 触发 的 事件 。 
onclick: 当 用 户 单 击 鼠 标 左 键 时 触发 ， 如 果 集 点 在 按钮 上 ， 并 按 Enter 键 ， 也 会 触发 访 
事件 。 
ondblclick: 当 用 户 双 击 鼠 标 左 键 时 触发 。 
onmousedown: 当 用 户 单 击 任 一 鼠标 按键 时 触发 (左右 键 都 可 以 )。 
onmouseup: 当 用 户 松 开 任 一 鼠标 按键 时 触发 (左右 键 都 可 以 )。 
onmouseover: 当 用 户 移 动 女 标 指针 全 菏 个 元 篆 上 时 触发 。 
onmouseout: 当 用 户 把 鼠标 指针 从 茶 个 元 素 上 移 开 时 触 友 。 
onmousemove: 当 用 户 在 某 个 元 素 上 持续 移动 鼠标 指针 时 触发 。 
【实例 11.3】 深 动 字 各 暂停 和 继续 播放 ， 文 件 名 称 为 chapter11.3.html， 内 容 如 下 : 
<IDOCTYEE Rtnmis 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 深 动 字 磋 暂停 和 继续 播放 </title> 
<stvyle type="text/css™"> 
marduee 
width: 250px; 
height: 150px; 
background-color: pink; 
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1etter-spaclng: Spx; 
tont=-s1ze: DC 
font-family: 华文 行 楷 ; 
padding-left: 100px; 
} 
QIVT{ 
text-align: center; 


} 


</style> 
</head> 
<body> 
<ull wy 
<marquee direction="up" scrolldelay="300" 
onmouseover="this.stop()" onmouseout="this.start () "> 
危楼 高 百 尺 ，<br /> 手 可 摘 星 辰 。<br /> 不 敢 高 声 语 ，<br /> 恐 惊天 上 人 。 
</marguee> 
</d1iv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter11.3.html，，。 一 一 一 一 一 一 一 一 一 一 一 
页 面 效 果 如 图 11-3 所 示 ， 当 鼠标 指针 移 至 滚动 /DD Wm x 


| 全 | 人 @ 127.0.0.1:8020/chapter11/chapte..， 丰 


字 各 时 字 秦 停止 深 动 (this.stop0),， 当 鼠 标 指针 移 | 号 应 用 站 


开 时 和 字 舌 继续 深 动 播放 (this.start())。 | 
| 危楼 高 百 尺 ， 
11.3.2 ”键盘 事件 | 手 可 摘 星 腿 。 
不 艇 高 声 语 ， 
| 了 六 下 上 上 人、 


键盘 事件 融 是 用 户 在 键盘 上 按 下 东 个 键 时 


触发 的 事件 。 | 
onkeydown: 当 用 户 在 键盘 上 按 下 某 个 按键 到 11-3 ”滚动 字幕 暂停 和 继续 播放 页 面 效果 
时 触发 。 


onkeyup: 当 用 户 释 放 按 下 的 按键 时 触发 。 
onkeypress: 当 用 户 在 键盘 上 按 下 按键 并 释放 时 触 肥 。 


AN 注意 : onkeypress 事件 不 适用 于 所 有 按键 (如 : Alt、Ctrl、Shift、Esc)。 监 听 一 个 用 户 是 
否 按 下 按键 请 使 用 onkeydown 事件 ， 所 有 浏览 器 都 支持 onkeydown 事件 。 


【实例 11.4】 键 盘 事件 ， 文 件 名 称 为 chapter11.4.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 键 盘 事 件 </title> 
<SCript> 
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function myKeyDown (1q) { 

console.log (document .getElementById(1d) .value); 
} 
function myKeyUp (1d)t 

Var name=document .getElementById (1id) .value; 


document .getElementById(1id) .value=name .toUpperCase ()，; 


} 
</script> 
</head> 
<body> 


<input id="name™" type="text" onkeydown="myKeyDown (this.1d)" 
onkeyup="myKeyUp (this.1d)"™ /> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter11.4.html， 页 面 效 果 如 图 11-4 所 示 ， 当 在 键盘 上 按 下 
任何 字符 按键 时 ， 可 以 在 控制 台 显 示 之 前 文本 框 中 的 内 容 ， 当 按 下 字符 按键 释放 时 ， 如 果 
是 小 写 ， 可 以 在 文本 框 中 显示 此 小 写字 母 的 大 写 形式 。 


a chapter11.4.html = -0 村 Web 浏 览 嚣 > -0 
0 html>» 六 省 a Cc http/1 ~ 昌 吓 -3 
6 <head> 


<meta charset="UTF-0"> HELLO 
<tit1e> 键 盘 事 件 < /ile> 
ript 
funct1on mo TH 
console,1og( ment ,qetElementById (id}) .value): 
! } 
10 function myKevyUp (id) 1 
11 var name=document .getElementByIdlid}) .value; 
二 之 document ,getElementById(id}) ,valus=name .toUPREICaSE ) 
13 } 
14 </ScCript> 
下 </:head> 
1 6 <body> 
于 了 2 Hinput id="name" type="text" onkeydown="myKeyDown (this.id)" onkeyup="myKeyUp (this.id}" /> 
18 </body> 
19 «</html>» 
二 站 
国 控制 台 = 二 
当前 是 [ 边 改 边 看 控制 台 ]， 点 右上 角 工 具 条 相应 按钮 可 切换 控制 台 其 | 荡 轩 过目 * 是 * 


[Web 浏览 占 ] "" /chapterll/chapterll.4.html (8) 


[Web 浏 览 如 ] "H” /chapterili/chapterll.4.html (8) 
[Web 浏 览 器 ] "HE jchapterili/chapterll.d,.html (9) 
[Web 神 寅 器 ] "HEL /chapterll/chapterll.4.html (8) 
[Web 浏 览 器 ] "HELL" fchapterllyAchapterll .4d.html (9) 


11-4 键盘 事件 控制 台 及 页 面 效果 


11.3.3 窗口 事件 


窗口 事件 就 是 针对 Window 对 象 触 发 的 事件 。 

onload: 当 用 户 打 开 页 和 面 并 且 所 有 页 和 面 元 系 加 载 完 成 时 触发 。 演 行 的 弹出 厂 告 窗口 束 古 
采用 这 个 事件 完成 的 。 

onbeforeunload: 当 用 户 即 将 离开 当前 页 面 (刷新 或 天 闭 ) 时 触发 。 

onunload: 当 用 户 离 开 网 页 或 者 关闭 浏 贤 器 窗口 时 触发 。 

onresize: 当 窗 口 调整 大 小 时 触发 。 
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A 注意 : 各 浏览 器 对 onunload、onbeforeunload 事件 的 支持 与 触发 条 件 实现 有 差异 ， 所 以 
在 onunload、onbeforeunload 事件 中 书写 的 方法 可 能 在 一 些 浏览 器 中 没有 被 执行 。 


【实例 11.5】 窗 口 事 件 ， 文 件 名 称 为 chapter11.5.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title> 和 窗口 事件 </title> 
<aoript> 
window.onload = function(})t1 
alert ("页 面 加 载 完 毕 ! ") ; 
} 


window.onbeforeunload = function()t 
return "人 确定 要 关闭 窗口 吗 ? "; 


} 
window.onresize = function()t 


alert ("您 在 调整 窗口 大 小 ! ") ; 
} 
</script> 
</head> 
<body> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter11.5.html， 页 面 效 果 如 图 11-5 所 示 ， 当 在 页 面 加 载 完 
毕 ， 关 闭 窗口 ， 调 整 窗口 大 小 时 会 出 现 不 同 的 提示 信息 。 


、 窗 于 x 8 go X | | Windows Intemet Explorer 
= pp , -全 扬 窗口 事件 x 
wm Yat 0 Teenanterl | ramapterl ls, rtm ] 
HH 抽 | a op TeEseheapd|Peasmharl Eee 上 确实 要 离开 此 页 中? 
胃口 1270019020 有 时 | C 癌 | 加 1270018020/chapter11ychapter115html 女 ; 名 
mite 二 1270018020 显示 I 
确定 要 关闭 轿 口 轧 ? 


尿 在 调整 窗口 灰 小 | 
| -》 离开 此 页 人 


下 留 在 此 页 (9) 


LL 不 允许 此 页 创建 更 多 消息 


图 11-5 ”窗口 事件 的 页 面 效果 


sa 11.4 表单 事件 


11.4.1 onsubmit 与 onreset 事件 


当 单 击 表单 上 的 “提交 ”(type="submit") 按 钮 时 就 会 触发 onsubmit 事件 。 单 击 “ 重 置 ” 
按钮 (type="reset") 时 会 触发 onreset 事件 。 
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【实例 11.6】 表 单 握 区 和 重 置 事件 ， 文 件 名 称 为 chapter11.6.html， 内 容 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title> 提 交 和 重 置 事件 </title> 
<Soript> 
window.onload = function (})t 
document .myform.onsubmit = submitForm; 
document .myform.onreset = resetForm; 
} 
function submitForm()t 
Var name = document .getElementById ("userName") .value; 
document .getElementById ("myDiv") .innerHTML = "Hello "+ name +™ I™; 
return false; 
} 
function resetForml()})t 
document .getElementById ("myDiv") .innerHTML = ™"; 
} 
</ Cript> 
</head> 
<body> 
<form name="myform"> 
用 户 名 : <input type-"text" id-="userName™ /> 
<input type="submit" value=" 提 交 " /> 
<input type "Peset™ value = "和 重 置 " /> 
</form><br /> 
<dliv 1d="myDlVv"> 
<fodiv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter11.6.html， 页 面 效 果 如 图 11-6 所 示 ，onsubmit 处 理 程 
序 submitForm 返回 false 时 ,表单 就 不 会 被 传递 给 服务 器 ， 当 前 页 面 不 会 刷新 。 所 以 当 用 三 
和 输入 用 户 名 并 进行 表单 提交 时 ， 用 户 输入 的 信息 会 出 现在 下 面 的 空 块 中 。 通 过 “ 重 置 ” 按 
钮 可 以 对 表单 信息 进行 重 置 ， 但 此 “ 重 置 ” 按 钮 不 仅 要 完成 表单 信息 重 置 ， 还 要 清空 div 中 
的 内 容 ， 所 以 采用 onreset 处 理 程 序 resetForm 完成 。 


| oO ”~ 口 | | OO - DO 
站 提交 和 重 置 事件 x 口 提交 和 重 置 事件 x 
GC 合 | 127.0.0.1:8020/chapter11/c.， 会 ] GCG 人 | © 127.0.0.1:8020/chapter11/c.. 六 | : 
| 党 应 用 口 2 应 用 品 
用 户 名 :May 提交 | 重量 | 用 户 名 :| | 提交 || 重 置 | 
Hello Mary ! 


es 


11-6 ”表单 提交 和 重 置 事件 的 页 面 效 果 
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onsubmit 处 理 程序 的 调用 也 可 以 放 在 表单 中 ， 代 码 如 下 : 


<form name="myform" onsubmit="return submitForm() ™ > 


11.4.2 onfocus 与 onblur 事件 


当 某 个 表单 元 素 获得 焦点 时 就 会 触发 onfocus 事件 ， 当 某 个 表单 元 素 失去 焦点 时 会 触发 
onblur 事件 。 
【实例 11.7】onfocus 和 onblur 事件 ， 文 件 名 称 为 chapter11.7.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>onfocus 和 onblur 事件 </title> 
</head> 
<body> 
<form name="myform"> 
用 户 名 : <input type="text" id="userName™" > 
<input type="submit" value=" 提 交 " /> 
<inmit twee="reset"™ Talue=m 量 笛 ” /3 
</ form> 
<SCript> 
document .getElementById ("userName") .onfocus = functlon() { 
this.stylje.backgroundColor = "pink"; 
} 
document .getElementById ("userName") .onblur = function()t 
this.style.backgroundColor = "white™; 
} 
</script> 
</body> 
</html> 
在 浏览 器 中 打开 网 页 文件 chapter11.7.html， 页 面 效 果 如 图 11-7 所 示 ， 当 用 户 单 击 文本 
框 时 ， 此 文本 框 获 得 焦点 ， 文本 框 背 景色 变 成 粉红 色 ; 当 文 本 框 失 去 焦点 时 ， 文本 框 背 景 
SD 
于 = 站 交 8 口 
六 onfocus 和 onblur 事 件 x 四 onfocus 和 onblur 事 件 x 


C 全 | 名 127.0.0.1:8020/chapter11/c.， 公 | : GC 合 | 加 127.0.0.1:8020/chapter11/c.， 家 | | 
:号 应 用 站 55 应 用 站 


用 户 名 :| | 提交 | 重 置 用 户 名 : 提交 ， 重 置 


11-7 ”表单 onfocus 和 onblur 事件 的 页 面 效 果 
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11.4.3 onselect 事件 


当 用 户 选择 input 或 者 textarea 表单 域 中 的 文本 时 会 触发 onselect 事件 。 
【实例 11.8】onselect 事件 ， 文 件 名 称 为 chapter11.8.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html» 
<head> 
<meta charset="UTF-8"> 
<title>onselect 事件 </title> 
</head> 
<body> 
<form name="myform"> 
用 户 名 : <input type-"text" id-"userName"” onselect="alert( 您 选 
中 了 部 分 信息 ")"™ /> <br /><br /> 
个 人 简介 : “br /xtextarea POWwS="O™ COlLS="35™ OnNnselect="alLert(" 
您 选中 了 部 分 信息 ')" ></textarea> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter11.8.html， 页 面 效 果 如 图 11-8 所 示 ， 当 用 户 选 择 文本 
框 或 文本 区 域 的 部 分 文本 时 就 会 触发 onselect 事件 ， 从 而 出 现 警示 框 提 示 。 


SB 口 
六 onselect 事 件 x 
GCG 台 | 127.0.0.1:8020/chapterl1l/chapter11.8.html dr: | 
:有 | 
eS 127.0.0.1:8020 显示 | 
用 户 各 : Mary 您 选中 了 部 分 信息 


个 人 简介 : 


11-8 表单 onselect 事件 的 页 面 效 果 


11.4.4 onchange 事件 


当 用 户 修 改 表单 字段 或 者 改变 下 拉 框 的 选择 时 会 触发 onchange 事件 。 
【实例 11.9】onchange 事件 ， 文 件 名 称 为 chapter11.9.html， 内 容 如 下 : 


<IDOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-—8"™"»> 
<title>onchange 事件 </title> 
5 OE 
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<serapt> 
function upperCase ()t 
Var name = document .getElementById ("userName") .value; 
document .getElementById("userName") -Value = 
name .toUpperCase (); 
} 
function changeHobby()t 
Var hobby = document .getElementById("these"); 
alert ("您 重 新 选择 了 爱好 : "+hobby[hobby.selectedIndex|] .value); 
} 
</ cript> 
</head> 
<body> 
<form name="myform"> 
用 户 名 : <input type="text" 1id="userName" onchange="upperCase()" 
Ene fh £3 
爱好 : 
<select id="theSe™" onchange="changeHobby () "> 
<option value=" 跨 球 "> 正 球 </Voption> 
<option value=" 人 篮球 "> 篮球 </option> 
<option value=" 上 网 "> 上 网 </option> 
</select> 
</form> 
</body> 
< /html> 


在 浏览 器 中 打开 网 页 文件 chapter11.9.html， 页 面 效果 如 图 11-9 所 示 ， 当 用 户 在 文本 框 
中 输入 英文 信息 ， 信 息 会 转换 成 大 写 显 示 。 当 用 户 改 变 下 拉 沫 单 选 择 时 ， 警 示 框 中 会 显示 
用 户 新 的 选择 ， 单 击 警 示 框 上 的 “确定 ”按钮 ， 则 新 选择 的 菜单 项 会 显示 在 下 拉 菜 单 选项 
框 中 。 

代码 注解 : 

(1) var hobby = document.getElementByld("theSe"): 

获取 下 拉 荣 单项 ， 存 储 在 数组 hobby 中 。 

(2) hobby.selectedIndex 

用 户 所 选择 的 下 拉 亲 单 的 索引 值 ， 下 标 从 0 开始。 


@ - DO 
[六 onchange 事 忻 x 
GC 全 © 127.0.0.1:8020/chapterlil/chapter11.9.html 二 
应 用 站 127.0.0.1:8020 显示 
用 户 名 : IMARY 您 重新 选择 了 妥 好 : 孵 球 
爱好 : | 足球 "| 确定 


mn I ss | ms 


11-9 表单 onchange 事件 的 页 面 效 果 
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表 11-1 JavaScript 中 的 常用 事件 


事 件 应 用 范围 
onclick 用 户 单 击 鼠标 左 键 时 触发 
ondblclick 用 户 双击 鼠标 左 键 时 触发 
onfocus 元 素 获 得 焦点 时 触发 
onblur 元 素 失去 焦点 时 触发 
onchange 元 素 内 容 或 者 所 选 内 容 改 变 时 触发 
onselect 选中 input 或 textarea 中 的 文本 时 触发 
onsubmit 提交 表单 时 触发 
onreset 重 置 表单 时 触发 
onload 用 户 打开 页 面 并 且 所 有 页 面 元 素 加 载 完 成 时 触发 
onbeforeunload 用 户 即 将 离开 当前 页 面 ( 刷 新 或 关闭 ) 时 触发 
onunload 用 户 离 开 网 页 或 者 关闭 浏览 器 窗口 时 触发 
onresize 窗口 调整 大 小 时 触发 
onmousedown 用 户 单 击 任 一 鼠标 按键 时 触发 (左右 键 都 可 以 ) 
onmousemove 用 户 在 某 个 元 闲 上 持续 移动 鼠标 指针 时 触发 
onmouseup 用 户 松 开 任 一 鼠标 按键 时 触发 (左右 键 都 可 以 ) 
onmouseover 用 户 移动 鼠标 指针 至 某 个 元 素 上 时 触发 
onmouseout 用 户 把 鼠标 指针 从 某 个 元 素 上 移 开 时 触发 
onkeydown 当 用 户 在 键盘 上 按 下 某 个 按键 时 触发 
onkevyup 用 户 释 放 按 下 的 按键 时 触发 
onkeypress 用 户 在 键盘 上 按 下 按键 并 释放 时 触发 


11.5 ” 回 到 工作 场景 


通过 11.2~11.4 节 内 容 的 学 习 ， 已 经 学 习 了 窗口 事件 、 鼠 标 事 件 、 键 盘 事件 和 表单 事件 ， 
掌握 了 常用 事件 的 使 用 。 下 面 回 到 前 面 介 绍 的 工作 场景 中 ， 完 成 工作 任务 。 

【工作 过 程 一 】 综 合 运 用 各 种 表单 事件 制作 一 个 自动 计算 总 价 网 页 一 一 《模拟 收银 》。 
网 页 具体 内 容 如 下 : 用 户 单 击 “账号 ”文本 框 时 ， 如 果 文 本 框 中 显示 “输入 您 的 会 员 账 号 ” 
则 清空 文本 框 ， 当 用 户 输 入 会 员 账 号 后 进行 审核 (账号 要 求 是 10 开头 的 数字 )， 如 果 用 户 输 
入 的 会 员 账 号 有 误 ， 则 提示 “账号 错误 ”， 文 本 框 呈现 全 选 状态 。“ 单 价 ” 文 本 框 模拟 超 
市 扫 码 显示 固定 值 25.00， 只 读 状态 。 当 “数量 ”文本 框 内 容 发 生 改 变 时 自动 计算 总 价 并 显 
示 在 “总 价 ” 文 本 框 中 。 工 作 过 程 一 的 页 面 效 果 如 图 11-10 所 示 。 
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四 表单 事件 综合 应 用 x 十 
CC 全 127.0.0.1:8020/chapt... 三 但 
;应 用 口 


账号 : 10234567 


单价 : 25.00 ¥ 
数量 : 6 个 
局 价 : 150 ¥ 


11-10 《模拟 收银 》 的 页 面 效 果 
创建 网 页 ， 文 件 名 为 chapter11.10.html， 内 容 如 下 所 示 : 


< 1 DOCITYEE html> 


<html> 
<head> 
<meta charset—="UTF— 8"> 
<titles</titlex 
<sceript> 
funcktron clearTextl{ }1 
if (document .myform.account .value==" 输 入 您 的 会 员 账 号 ") 
document .myform.account .Value= 
全 二 本 全 
document .myTIorm.accountL .select( }); 
} 
function check({( ) 1 
Var a=document .myform.account .value; 
if (Hsubstrt0,2}) ="10™ || isNaN(a}))} 
{ 
alert ("格式 错误 ， 请 重新 输入 ")， 
document .myform.account .select( ): 
} 
} 
function computel( ) { 
Var price= document .myform.price.value; 
Var number= document .myform.number.value ，; 
document .myform.total.value= price*number; 
} 
< seript> 
</head> 
<body> 
<form name="myform"> 
<Lable> 


<try<ztdSs 巍 与 ; <input name ="account™ onfocus="clearText( )" 
onchange="check( )" type ="text"” value=" 输 入 您 的 会 员 账 号 "></td></tr> 

<Ers<td93 单 从: <input name = 二 "price"type= "text" va"25.00" 
readonly >¥</td></tr> 
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<tr><td> 数 量 ; <input name ="number™" onchange="computel( )" 
LYpe "text™ S$ 修 <r/trs 

<tF><td> 轧 价 : <input name "total" type "text"value— "0.00"> 
Et/ir> 

</table> 
</form> 
</body> 

</html> 


【工作 过 程 二 】 制 作 一 个 菜单 级 联 效 果 一 一 《日 期 级 联 沫 单 》。 网 页 具体 内 容 如 下 : 
用 户 选 择 “ 月 ” 沫 单 时 ，“ 日 ” 玉 单 能 目 动 显示 这 个 月 的 相应 日 供用 户 选 择 。 工 作 过 程 二 
的 页 面 效 果 如 图 11-11 所 示 。 
| 一 口 Xx 
六 下 拉 菜 单 级 联 效果 x 
让 人 127.0.0.1:8020/chapteriljichapter11... 磷 
5 应 用 人 
3 月 |1 | 日 


E> 


i Co = Ls Ch = Cy hy 


下 11-11 《日 期 级 联 菜 单 》 的 页 面 效 果 
创建 网 页 ， 文 件 名 为 chapterl1.11.html， 内 容 如 下 所 示 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 下 拉 菜 单 级 联 效 果 </title> 
人 <script> 
window.onload = initForm; 
function initForm() { 
document .getElementByld("months") .selectedIndex = 0; 
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document .getElementBylId ("months") .onchange = populateDays; 
} 
function populateDays() 1 
Var monthDays = new Array (31,28,31,30,31,30,31,3]1,30,31,30,31); 
Var monthstr = this.options[this.selectedIndex] .value; 
if (monthstr 1= ™™) 1 
Var theMonth = ParseInt (monthstr); 
document .getElementById ("days") .options.length = 0; 
for (Var 1=0; i<monthDays[theMonth]; 1++) 1{ 
document .getElementById ("days") .options{[1i] = new 
option (1+1); 


} 
</script> 
</head> 
<body> 
<form> 
<select id="months"> 
<option value=""> 请 选择 月 </option> 
<option value="0"™>1</option> 
<option value="1">2</option> 
<option value="2"™>3</option> 
<option value="3">4</option> 
<option value="4">5</option> 
<option Value="5">6</opt1Lon> 
<option value="6">71</option> 
<option value="7">8</option> 
<option value="8"™>9</option> 
<option value="9">]0</option> 
<option value="10">11</option> 


<option value="11">12</option> 

</select> 月 &nbsp:; 

<select id="days"> 
<option> 请 选择 日 </option> 

</select> 日 

</form> 
</body> 
</html> 


“11.6 工作 实 训 营 


11.6.1 训练 实例 


1. 训练 内 容 
实现 省 份 城市 级 联 ， 页 面 效 果 如 图 11-12 所 示 。 和 省份 和 城市 下 拉 菜 单 中 产生 级 联 效 果 ， 
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可 以 选择 部 分 省 份 和 城市 。 


六 省 份 与 城市 级 联 效果 x 
GC 合 © 127.0.0.1:8020/chapter11/ex... 
| 吐 应 用 癌 


图 11-12 省份 城市 级 联 效果 
2. 训练 目的 


> 午 握 表单 事件 的 使 用 。 
> 午 握 数组 在 实际 问题 中 的 应 用 。 


3. 训练 过 程 

参照 11.5 节 中 的 操作 步骤 。 
4. 技术 要 点 

灵活 使 用 表单 中 的 各 种 事件 。 


11.6.2 ”工作 实践 常见 问题 解析 


【常见 问题 】 如 果 在 一 个 元 素 上 添加 多 次 同一 事件 ， 如 何 保证 事件 处 理 程序 都 能 执行 ? 

【 答 】 用 onclick 绑 定 事件 的 方法 ， 可 以 莱 容 主流 浏 宽 副 ， 但 如 来 在 一 个 元 系 上 添加 多 
次 同一 事件 ， 如 objectonclick=methodl:objectonclick=method2:object.onclick=method3:， 那 
么 只 有 最 后 绑 定 的 事件 处 理 程序 method3 会 被 执行 。 解 诀 这 个 问题 需要 使 用 attachEvent 或 
addEventListener 方法 。 选 择 哪个 方法 涉及 浏 贤 絮 的 羔 容 性 问题 。addEventListener 方法 兼容 
Firefox、Chrome、IE、Safari、Opera 等 浏览 器 ,不 菩 容 IE7、IE8。attachEvent 方法 兼容 IE7、 
IE8， 丰 若 窑 Firefox、Chrome、IE9、 下 10、 正 11、Safari、Opera。 

oOb]ect .attachEvent ("onclick",method]l)}; 

object.attachEvent ("onclick",method2); 

object.attachEvent ("onclick",method3); 

attachEvent 方法 执行 顺序 是 : method3->method2->methodl 。 

object.addEventListener("click",method]l, false) ; 

ob]ect .addEventListener("click",method?, false)}).; 

object.addEventListener ("click",method3, false)}).; 

addEventListener 方法 执行 顺序 为 method1->method2->method3。 
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兼容 不 同 浏览 亏 的 对 象 绑 定 事件 方法 : 


1f (object.attachEvent) { 
object.attachEvent ("onclick", method3); 
object.attachEvent ("onclick", method2); 
object.attachEvent ("onclick", method]l):; 


} 

elsef 
object.addEventListener ("click", methodl , false) 
object.addEventListener("click", method2 , false) 
object.addEventListener ("click", method3 , false) 

} 


这 样 ， 无 论 访问 者 使 用 什么 浏览 夯 ， 痢 可 以 实现 在 一 个 元 系 上 沃 加 多 次 同一 事件 时 ， 
事件 处 理 程序 都 能 执行 。 


Ry 11.7 ”本草 小 结 


当 用 户 浏 顺 页 面 进行 操作 时 会 触发 事件 从 而 执行 相应 的 事件 处 理 程序 。 

向 用 的 事件 有 鼠标 事件 、 键 盘 事 件 、 窗 口 事 件 及 表单 事件 。 

第 用 的 鼠标 事件 有 onclick、ondblclick、onmousedown 、onmouseup 、onmouseoveT、 
onmouseout、onmousemove。 

利用 的 键盘 事件 有 onkeydown、onkeyup、onkeypress。 

利用 的 窗口 事件 有 onload、onbeforeunload、onunload、onresize。 

利用 的 表单 事件 有 onsubmit、onreset、onfocus、onblur、onselect、onchange。 


2 11.8 习 题 


一 、 单 项 选择 题 
1. 在 下 列 叙 述 中 ， 错 误 的 是 ( 。 )。 
A. onclick 事件 在 用 户 单 南 鼠标 左 键 时 触发 ， 单 击 和 鼠标 右键 也 会 触发 
B. ondblclick 事件 在 用 户 双击 鼠标 左 键 时 触发 
C. onmousedown 事件 在 用 户 单 击 任 一 鼠标 按键 时 触发 
D. onmouseup 事件 在 用 户 松 开 任 一 鼠标 按键 时 触发 
2. 下 面 哪个 事件 是 鼠标 指针 移动 到 某 个 元 素 上 时 和 触发 的 ? (  ”)。 


A. onkeydown B. onmouseout C. onmouseover D. onmousemove 
3. 当 页 面 的 访问 者 移动 鼠标 指针 时 ， 就 会 触发 事件 ( ). 

A. onmouseup B. onmousedown C. onmousemove D. onmove 
4. 下 面 哪个 事件 不 是 键盘 事件 (。 )? 

A. onkeyup B. onkeydown C. onkeymove D. onkeypress 
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二 、 填 衬 题 
1. 元 素 获 得 焦点 时 触发 事件 ， 元 素 失去 焦点 时 触发 事件 ， 
2. 单 击 “提交 ”按钮 时 触发 事件 , 单 击 “ 重 置 ”按钮 时 触发 

事件 . 


三 、 操 作 题 
创建 网 页 《登录 页 面 》， 文 件 名 为 ex11.1.html， 使 用 事件 对 表单 数据 进行 检查 验证 ， 
并 通过 事件 处 理 程序 处 理 表单 提交 和 重 置 ， 页 面 及 事件 自行 设计 。 


了 解 - 

解 Bootstrap 
Boo 

了 CSS 样式 设计 
本 布局 组 件 设计 


国 ” 党 
掌握 使 用 也 
图 r+ OOtstr 
党 握 使 db (SS 样 
和 人 Bootstrap 布局 We 来 设置 页 面 。 
1 Bootstrap os 页 站 
设置 页 面 昌 
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SS 12.1 工作 场景 导入 


【工作 场景 】 

采用 原始 技术 HTML5+CSS3+JavaScript 设计 的 页 面 不 够 炫 ， 怎 么 才能 快速 地 做 一 个 高 
大 上 的 网 员 ， 不 用 担心 兼 容 问 题 ， 提 供 了 很 多 样式 供 选 择 ， 即 把 做 前 桨 样式 封 芭 成 一 个 炎 ， 
比如 你 需要 实现 一 个 网 站 的 导航 (完全 目 己 实现 需要 写 很 多 代码 )， 通 过 HTML 标签 调用 某 
些 类 ， 就 可 以 快速 完成 操作 合理 且 美 观 的 导航 栏 。 

下 面 需要 制作 某 购 物 网 址 首页 部 分 模块 。 

【引导 问题 】 

(1) 什么 是 Bootstrap? 该 包 有 哪些 内 容 ? 

(2) 如 何 导 入 Bootstrap 类 并 配置 开 妈 环境 ? 

(3) 如 何 导 入 Bootstrap CSS 样式 类 ? 如 何 使 用 这 些 关 设计 页 面 ? 

(4) Bootstrap 布局 组 件 有 哪些 ?如 何 使 用 这 些 组 件 设计 页 面 ? 

(5) Bootstrap 插件 如 何 导 入 ? 如 何 利用 这 些 插件 设计 页 面 ? 


Se 12.2 了 解 Bootstrap 


Bootstrap 是 目前 最 受 欢迎 的 Web 前 闹 框 架 。 它 是 Twitter 的 Mark Otto 和 Jacob Thornto 
开发 的 。Bootstrap 是 基于 HTMIL、CSS、JavaScript 的 ， 它 简洁 灵活 ， 是 一 个 热门 的 开源 项 
目 , 提供 了 丰富 的 Web 组 件 , 设计 人 员 可 以 使 用 这 些 组 件 快速 搭 出 漂 有 这、 功能 完备 的 网 站 ， 
使 得 Web 开发 更 加 快捷 。 目 前 使 用 比较 多 的 版 本 是 V3.3.7， 但 最 新 更 新 到 了 V4.0 版 本 。 


12.2.1 Bootstrap 环境 安装 


Bootstrap 安装 是 非 利 容易 的 。 如 何 下 载 并 安装 Bootstrap 开发 包 ? Bootstrap 的 官方 
网 站 地 址 是 http:Wgetbootstrap.com/， 可 以 单 击 Download 链接 下 载 Bootstrap 最 新 版 本 ,如 图 
12-1 所 示 ， 

目前 , 国内 也 有 不 错 的 Bootstrap 中 文 网 站 , 比如 : http://www.bootcss.com/ 下 载 Bootstrap 
安装 包 ， 如 图 12-2 所 示 。 

在 图 12-2 中 单 击 “Bootstrap3 中 文 文档 ”按钮 ， 转 到 下 载 页 面 ， 如 图 12-3 所 示 。 

在 图 12-3 中 可 以 看 到 三 个 选项 : 用 于 生产 环境 的 Bootstrap、Bootstrap 源码 和 Sass。 单 
击 第 一 项 “下载 Bootstrap ”按钮 ， 访 项 是 Bootstrap 框架 开发 包 ; 第 二 项 “下 载 源码 ”按钮 ， 
该 项 是 使 用 CSS 预 编译 语言 Less 编写 的 Bootstrap 源 代 码 ，LESS CSS 是 一 种 动态 样式 语 
言 ， 属 于 CSS 预 处 理 语 言 的 一 种 ， 它 使 用 类 似 CSS 的 语法 ， 为 CSS 赋予 了 动态 语言 的 特 
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性 ， 如 变量 、 继 了 床 、 运 算 、 国 数 等 ， 更 方便 CSS 的 编写 和 维护 ， 第 三 项 “下 载 Sass 项 目 ” 
按钮 ，Sass 是 一 种 CSS 的 开发 工具 ， 提 供 了 许多 便利 的 写法 ， 可 大 大 节省 设计 者 的 时 间 ， 
使 得 CSS 的 开发 变 得 简单 和 可 维护 。 


BE Bootstrap The mostp XK WW 


:忠志 | D getbootstrap,com 


出 加 


B Home Documentation Examples Themes Expo Bleg 4 人 Download | 


Bootstrap 


Build responsive, mobile-first projects on the web 
with the world's most popular front-end 


component library. 


Bootstrap ls an Gpen source toolkt to 

developing with HTML 《SS and Js Quickly 
prototype your ideas or build your entire app with 
our Sass variables and mixins, responsive grid 
system, extensive prebyilt components, and 


powerTyl plugins Bullt on jiduery. 


Get started | | Download 


Currenthy vt.1.3 


图 12-1 ”Bootstrap 的 官网 页 面 


. B Bootstrap 中 文 网 X 
GCG 合 | © www.bootcss.com 个 


Bootstrap 


间 洁 、 和 且 观 、 弹 悍 的 朋 颗 开 友 框 染 ，1 上 Web 开 友 颗 迅 束 、 间 早 。 


Bootstrap3 中 文 又 档 (v3.3.7) 


驹 | Bootstrap 问 答 社区 | 性 新浪 微 博 : @Bootstrap 中 文 网 


12-2 ”Bootstrap 中 文 网 
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人 人 -= 0 x 
7 日 起 步 . Boctstrap wd 中 下 其 % 时 
二 他 合 | 安全 | httpsyW3.bootcss.comrgetting-started#download 三 | : 


下 载 


Bootstrap “(当前 版 本 v3.3.7) 提供 以 下 几 种 方式 帮 你 快速 上 手 ， 每 一 种 方式 
针对 县 有 不 同 技能 等 级 的 开发 者 和 不 同 的 使 用 场景 。 继 续 阅 读 下 面 的 内 容 ， 看 
看 哪 种 万 式 适 合 你 的 需求 吧 。 


用 于 生产 环境 的 Bootstrap 源码 Sass 
B ootstrap Less、Jawascript 和 六 性 产 侍 的 源 这 是 Bootstrap 从 Less 到 $ass 的 
翁 ， 并 旦 带 训 训 档 。 需 要 Less 蝙 笃 滨 的 花 植 项 目 ， 用 于 快速 地 在 


潼 译 芳 乒 畏 后 的 与 588， Javascript CR , 避 
和 字体 立 件 ， 不 外 公立 档 和 源码 立 器 和 一 些 设置 工作 . Rails、Lompass 或 只 针对 5855 
的 别 目 中 己 | 六。 


件 。 
ss | 下 载 源 码 | 
| 下 载 $ass 项 目 | 


下 载 Bootstrap | 


12-3 下载 Bootstrap 框架 


12.2.2 ”Bootstrap 包含 的 内 容 


Bootstrap 提供 了 压缩 包 ， 在 下 载 下 来 的 压缩 包 内 可 以 看 到 以 下 目录 和 文件 ， 这 些 文件 
按照 类 别 放 到 了 不 同 的 目录 内 。Bootstrap 开发 包 中 包含 css、js 和 fonts 三 个 目录 ， 分 别 表 
示 编 译 好 的 样式 表 文 件 、 编 译 好 的 脚本 文件 和 字体 文件 。 其 目录 结构 图 如 图 12-4 所 示 。 


v er bootstrap-3.3,.7-dist 

w [ny Css 
bootstrap.css 
目 bootstrap.css.map 
bootstrap.min.css 
国 bootstrap,min.css,map 
bootstrap-theme.css 
国 bootstrap-theme.css.map 
bootstrap-theme.min.css 
和 眉 bootstrap-theme.min.css.map 

v lm fonts 
上 自 glyphicons-halflings-regular.eot 
性 glyphicons-halflings-regular.svg 
| glyphicons-halflings-regular.ttf 
站 glyphicons-halflings-regular.woff 
天 glyphicons-halflngs-regular.woft2 

~ [my Js 
bootstrap,js 
bootstrap.min,js 
npm,js 


图 12-4 ”Bootstrap 开发 包 的 内 容 
12.2.3 ”使 用 Bootstrap 框架 


使 用 Bootstrap 的 功能 构建 一 个 Bootstrap 网 站 其 实 很 简单 ， 与 引入 ess 样式 表 和 添加 
JavaScript 脚本 文件 基本 一 样 ， 使 用 link 引入 Bootstrap CSS 样式 ， 使 用 <scrip 人 标签 引入 
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Bootstrap JavaScript。 其 语法 格式 如 下 。 
(1) 添加 Bootstrap CSS， 其 语法 格式 如 下 : 


<1link href="bootstrap-3.3.7-dist/css/bootstrap.min.css™” rel="stylesheet™ > 


(2) 添加 Bootstrap JavaScript 效果 ， 其 是 基于 JQuery 的 ， 需 要 先 引 入 JQuery 包 文 件 ， 
其 语法 格式 如 下 : 


<script sre=—™ bootstrap—3.3:7-dist squery 3" Sy/script> 
<SCript src="bootstrap—3.3.7-dist/jJs/bootstrap.Js" ></script> 


【实例 12.1] 在 HIML 文档 中 如 何 添加 Bootstrap， 文 件 名 称 为 chapter12.1.html， 内 容 
如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF—8"> 
<title>Bootstrap S| 入 人 </title> 
<]11nK href="bootstrap—3.3.7-dist/css/bootstrap.min.css" 
rel="stylesheet™ > 
</head> 
<body> 
<hl>Hello world!</h1l> 
</bhody> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.1.html， 页 面 效 果 如 图 12-5 所 示 。 
【实例 12.2】 使 用 Bootstrap 表格 样式 ， 文 件 名 称 为 chapter12.2.html， 内 容 如 下 : 


<1IDOCTYPE html> 
<htm]l> 
<head> 
<meta charset="UTF-—8"»> 
<title>Bootstrap S| 入 </title> 
<1ink href="bootstrap—3.3.7-dist/css/bootstrap.min.css" 
rel="stylesheet™ > 
</head> 
<body> 
<TLable class="table"> 
<tIr> 
<td> 姓 名 </td> 
<td> 学 写 </td> 
<td> 年 龄 </td> 
去 下 入 
<tr> 
<td> 李 明 </td> 
<td>s001</td> 
<td>18</td> 
<Itr> 
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</table> 
</body> 
</html> 


在 浏览 器 中 打开 文件 chapter12.2.html， 其 运行 效果 如 图 12-6 所 示 : 


py [| Bootstrap 引 | 人 . \ \ 


已 合 | 127.0.0.1:8020/ 教 材 /实例 /... 


| 
子 抒 


Hello world! 
s001 


图 12-5 ”Bootstrap CSS 引入 效果 图 12-6 ”Bootstrap CSS 中 table 效果 图 


AS 12.3 使 用 Bootstrap CSS 样式 


12.3.1 排版 


文本 排版 是 Web 页 面 设 计 的 重要 部 分 ， 了 解 使 用 Bootstrap CSS 样式 ， 设 定 默 认 的 
Bootstrap 风格 ， 并 且 可 以 根据 具体 的 需要 改变 默认 样式 ， 来 设 定 合适 的 页 面 效 末 。 排 版 样 
式 的 内 容 主 要 包括 标题 、 强 调 、 段 纱 、 地 址 、 列 表 及 其 他 内 联 等 元 系 标 窒 。 

Bootstrap 使 用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为 其 默认 的 字体 ， 
字体 大 小 为 10px。 


1. 标题 标记 


Bootstrap 定义 了 所 有 的 HIML 标题 hl 到 h6) 的 样式 ， 即 默认 的 字体 、 行 高 和 大 小 。 
hl 的 默认 大 小 为 36 像素 ，h2 为 30 像素 ，h3 为 24 像素 ，h4 为 18 像素 ，hs 为 14 像素 ，h6 
为 12 像素 ; 字体 是 按照 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 这 个 顺序 查找 计算 
机 上 和 安 疙 的 字体 族 ， 最 后 一 个 字体 sans-serif 为 默认 的 字体 族 。 

【实例 12.3】 使 用 Bootstrap CSS 设 定 标 题 标记 ， 文 件 名 称 为 chapter12.3.html， 内 容 
如 下 : 


<!IDOCTYPE html> 
<html> 
<head> 
“<meta Charset="UutI "> 
<title>Bootstrap 标题 </title> 
<link rel="stylesheet™ href="bootstrap—-3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
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<h1> 我 是 标题 hl </h1> 
<h2> 我 是 标题 n2</h2> 
<h3> 我 是 标题 n3</h3> 
<h4> 我 是 标题 n4</h4> 
<h5> 我 是 标题 n5</h5> 
<h6> 我 是 标题 n6</h6> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.3.html， 页 面 效 果 如 图 12-7 所 示 。 


4 站 Booctstrap 标 古 


G 合 | @ 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /.， 色 衣 | : 
和 Pa | 
我 是 标题 h1 
我 是 标题 h2 


我 是 标题 h3 


我 是 标题 h4 
我 是 标题 h5 


我 是 标题 hn6 


12-7 ”Bootstrap CSS 中 的 标题 效果 


如 果 需 要 向 任何 标题 添加 一 个 内 联 子 标题 ， 只 需 在 本 文 内 容 两 旁 添 加 <small>, 或 者 添 
加 .small， 这 样 可 得 到 一 个 字号 更 小 的 、 闫 色 更 浅 的 文本 ， 如 下 面 实 例 所 示 。 

【实例 12.4】 使 用 Bootstrap CSS 设 定 标 题 标签 ， 文 件 名 称 为 chapter12.4.html， 内 容 
如 下 : 


<IDOCTYPE html»> 
<html> 
<head> 
<meta charset=—="utf 8"»> 
<title>Bootstrap 内 联 子 标 题 </title> 
<link rel="stylesheet" 
href="lbootstrap-3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<h1> 我 是 标题 nh1<sma1l1> 我 是 副标题 hl1</small></h1> 
<h2> 我 是 标题 h2<smal11 > 我 是 副标题 h2</small></h2> 
<h3> 我 是 标题 h3<span class="small"> 我 是 副标题 n3</span></h3> 
<h4> 我 是 标题 h4<span class="small"> 我 是 副标题 n4</span></h4> 
<h5> 我 是 标题 h5<span class="small"> 我 是 副标题 n5</span></h5> 
<h6> 我 是 标题 n6<span class="small"> 我 是 副标题 n6</span></h6> 
</body> 
</html> 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


在 浏览 器 中 打开 网 页 文件 chapter12.4.html， 页 面 效 果 如 图 12-8 所 示 。 


) 口 Boctstrap 内 联 子 标题 x 由 
CO Ee 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /chapter12.4...， 忆 诅 | : 


> 是 标题 h 1 我 是 副标题 h 


> 是 标题 h2 我 是 副标题 h? 


是 标题 hh3 我 是 副标题 h3 


我 是 标题 h4 我 是 副标题 h4 


二 是 标题 h5 苇 是 副标题 h5 


我 是 标题 h6 我 星 副标题 h6 


12-8 ”Bootstrap CSS 中 副标题 页 面 效 果 

2. 哩 调 

HIML 提供 了 强调 标记 <small>( 设 置 文本 为 父 文 本 大 小 的 85%)、<strong>( 设 置 文本 
为 更 粗 的 文本 )、 <em>( 设 置 文本 为 笠 体 )。 Bootstrap 提供 了 一 些 用 于 强调 文本 的 类 , 对 加 粗 、 
斜体 、 对 齐 和 颜色 强调 等 样式 , 使 用 HTML 提供 的 一 些 强调 的 标记 结合 Bootstrap 提供 的 一 
些 类 ， 如 .text-lef 回 左 对 齐 文 本 )、text-center( 居 中 对 齐 文 本 )、.text-right( 回 右 对 齐 文 本 )， 其 
中 .text-warning、.text-info、.text-success、. text-danger 都 是 通过 颜色 突出 强调 , 这 些 Bootstrap 
类 可 以 很 好 地 优化 之 前 的 HTML 标记 设计 。 

【实例 12.5】 使 用 Bootstrap CSS 设 定 标题 标记 ， 文 件 名 称 为 chapter12.5.html， 其 内 容 

如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 强调 </title> 
<link rel="stylesheet" 
href="bootstrap—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<small> 本 行内 容 使 用 small 标记 </small><br> 
<strong> 本 行内 容 使 用 strong 标记 </strong><br> 
<em> 本 行内 容 使 用 em， 并 呈现 为 斜体 </em><br> 
<p class="text-left"> 同 左 对 齐 文 本 </p> 
<p class-"text-center"> 居 中 对 齐 文 本 </p> 
<p class="text-right"> 向 右 对 齐 文本 </p> 
<p class="text-justify"> 本 行内 容 两 端 对 齐 </p> 
<p class="text-primary"> 本 行内 容 使 用 primary class</p> 
<p class="text-success"> 本 行内 容 使 用 success class</p> 
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<p class-"text-info"> 本 行内 容 使 用 info class</p> 
<p class="text-warning"> 本 行内 容 使 用 warning class</p> 
<p class="text-danger"> 本 行内 容 使 用 danger class</p> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.5.html， 页 面 效 果 如 图 12-9 所 示 。 


4 [| Bootstrap 强 调 x Wa 
C 个 © 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /chapter12.5...， 所 公 | : 


本 行内 容 使 用 small 标 记 
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东方 风 窜 入 mm， 池 宇 寺 
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本 行内 容 使 用 success class 
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本 行内 容 使 用 danger class 


图 12-9 ”Bootstrap CSS 中 使 用 强调 标记 的 页 面 效果 
3. 缩写 


Bootstrap 框架 对 见 写 标 签 <abbr> 元 系 进 行 补 元 优化 。 元 系 的 样式 为 显示 在 文本 撒 部 市 
有 一 条 浅 色 的 虚线 框 ， 当 鼠标 指针 巧 停 在 缩写 的 文本 上 时 ， 会 显示 出 完整 的 文本 内 容 ， 鼠 
标 指针 移 到 文本 内 容 上 方 时 会 变 成 “问号 ”的 指针 。 即 设 定 <abbr> 中 的 title 属性 为 显示 的 
完整 文本 内 容 。 其 语法 格式 如 下 : 


<abbr title=m 妫 本 完整 内 容 " class=".initialism">WWW</abbr> 


类 .initialism 为 显示 完整 的 文本 内 容 得 到 一 个 更 小 字体 。 
【实例 12.6】 使 用 Bootstrap CSS 设 定 <abbr> 标 记 ， 文 件 名 称 为 chapter12.6.html， 内 容 
如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>bootstrap 纵 略 语 </title> 
<link rel="stylesheet™ href="bootstrap-—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<abbr title="World Wide Web" class="1initiallism">WWW</abbr><br> 
<abbr title="HyperText Transfer Protocol™" class="initiallism"> 
HITP 
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</abbr><br> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.6.html， 页 面 效 果 如 图 12-10 所 示 。 


7 [bootstrap 编 格 语 其 W 
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4. 地 址 
HTML 提供 了 <address> 标 记 表 不 一 个 元 系 或 条 文档 的 联系 信息 。Bootstrap 框架 的 显 
示 效 果 为 汪 加 了 更 大 的 瓜 部 外 边框 ， 重 置 字 体 风 格 和 行 局 。 
【实例 12.7】 使 用 Bootstrap CSS 设 定 <address> 标 记 ， 文 件 名 称 为 chapter12.7.html， 内 


py ” 

窑 如 下 : 
<IDOCTYPE htm > 
<html» 


<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 地 址 </title> 
<link rel="stylesheet" 
href="bootstrap—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<address> 
<strong>n]cit</strong><br> 
O07 street<br> 
Nan]jing, Wenlan XXXXX<br> 
<abbr title="Phone">P:</abbr> (025) 123-7890 
</address> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.7.html， 页 面 效 果 如 图 12-11 所 示 。 
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12-11 Bootstrap CSS 中 使 用 地 址 address 元 素 的 效果 
5. 5 用 


很 多 网 站 上 会 引用 一 些 文章 、 文 献 等 资料 ， 因 此 在 页 面 显 示 引 用 信息 ，HIML 采用 
<blockquote> 元 素 标 记 定 义 引 用 语 。Bootstrap 中 为 <blockquote> 标 签 实 现 了 增强 样式 ， 可 添 
加 一 个 <small> 标 记 来 标识 引用 的 类 ， 使 用 class .pull-right 同 右 对 亨 引 用 。 

【实例 12.8] 使 用 Bootstrap CSS 设 定 <blockquote> 标 记 ， 文 件 名 称 为 chapter12.8.html， 


内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"»> 
<title>Bootstrap 9| 用 </title> 
<1link rel="stylesheet™" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<blockquote> 
<p> 
这 是 一 个 默认 的 引用 实例 。 
</p> 
<small>Someone famous in <cite title="Source Title™"> Source 
Title</cite> 
</small> 
</blockquote> 
<blockgquote class="pull-right"> 
这 是 一 个 带 有 源 标 题 ， 并 向 右 对 齐 的 引用 。 
<small>SsSomeone famous in <cite title="Source Title"> Source Title</cite> 
</small> 
</blockquote> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.8.html， 页 面 效 果 如 图 12-12 所 示 。 
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Bootstrap 框架 中 定义 三 种 图 片 样式 类 class, 分别 为 .mg-rounded 类 、.img-circle 类 和 .ime- 
thumbnail 类 。 具 体 如 下 。 
> .img-rounded: 添加 border-radius:6px 来 获得 图 片 圆 角 。 
> .img-circle: 添加 border-radius:S$05%46 来 让 整个 图 片 变 成 圆 形 。 
> .img-thumbnail: 添加 一 些 内 边 距 (padding) 和 一 个 灰色 的 边框 。 
【实例 12.9】 使 用 Bootstrap CSS 设 定 图 片 样式 ， 文 件 名 称 为 chapter12.9.html， 内 容 


如 下 : 
<1lDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bootstrap 图 片 </title> 
<1ink rel="stylesheet" href—"bootstrap—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<1mg SrC-—"img/eg sun.gif™ class—"img rounded"> 
<IMmg SFO "M/Eg SUN.gLIE™ Tlass "mg C1Pele"™ 
<1img Src="img/eg sun.gif™ class=—"img thumbnall™"> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.9.html， 页 面 效 果 如 图 12-13 所 示 。 


Bootstrap 概述 


1 上品 Bootstrap 图 片 x\ 


GG 台 |@ 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /chapfte 
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Bootstrap 框架 提供 了 为 表格 元 北 增 放 了 多 种 表现 形式 ， 上 有 具体 的 表格 类 的 说 明 如 表 12-1 


所 示 。 
表 12-1 Bootstrap table 类 属性 表 

类 摘 述 
table 为 任意 <table> 谎 加 基本 样式 〈 只 有 横 回 分 隅 线 ) 
.table-striped 在 <tbody> 内 添加 斑马 线形 式 的 条 纹 (IE8 不 支持 ) 
.table-bordered 为 所 有 表格 的 单元 格 添 加 边框 
.table-hover 在 <tbody> 内 的 任 一 行 启 用 鼠标 指针 悬 停 状态 
.table-condensed 行内 边 距 (padding) 被 切 为 两 半 ， 让 表格 更 加 紧凑 
table-striped 在 <tbody> 内 的 行 上 看 到 条 纹 
.table-bordered 每 个 元 素 周围 都 有 边框 ， 且 整个 表格 是 圆 角 的 
.active 将 悬 停 的 颜色 应 用 在 行 或 者 单元 格 上 
.SUCCeSS 表示 成 功 的 操作 
info 表示 信息 变化 的 操作 
.warning 表示 危险 的 操作 


【实例 12.10】 使 用 Bootstrap CSS 中 .table-striped class， 在 <tbody> 内 的 行 上 看 到 条 
纹样 式 ， 文 件 名 称 为 chapter12.10.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF—8"»> 
<title>Bootstrap 表格 </title> 
<link rel="stylesheet™ href="bootstrap-—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
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<body> 
<table class="table table-striped"> 
<caption> 条 纹 表 格 布局 </caption> 
<tr> 
<tasE</Ed> 
<td> 学 写 </td> 
<td> 年 龄 </td> 
<itr> 
< 
<td> 李 明 </td> 
<td>s001</td> 
<td>18</td> 
</tr> 
</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.10.html， 页 面 效 果 如 图 12-14 所 示 。 


/ne tstrap 表 阁 x 
区 re Wm— | 
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条 纹 表格 布局 


12-14 ”Bootstrap CSS 中 使 用 .table-striped 类 的 效果 图 


【实例 12.11 使 用 Bootstrap CSS 中 .table-bordered class, 在 <tbody> 内 的 行 上 每 个 元 
系 周围 都 有 边框 ， 且 整个 表格 是 圆 角 的 ， 文 件 名 称 为 chapter12.11.html， 内 容 如 下 : 


<1IDOCTYPE htLmlL> 


<html> 

<head> 

<meta Charset=—=" UTE 一 和 > 

<title>Bootstrap 边框 表格 </title> 

<11nK rel="stylesheet™ href="bootstrap-—3.3.7-dist/css/bootstrap.mn.css"> 
</head> 
<body> 

<table class="table table-bordered™> 

<caption> 边 框 表格 布局 </caption> 
i 
<td> 姓 名 </td> 
ee 
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<td> 学 写 </td> 
<td> 年 龄 </td> 

</tr> 

<tr> 
<td> 李 明 </td> 
<td>s001l</td> 
<td>18</tdqd> 

</tr> 

</table> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.11.html， 页 面 效 果 如 图 12-15 所 示 。 


/六 Bootstrap 边 框 表格 x WW 
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12-15 ” Bootstrap CSS 中 使 用 .table- bordered 类 的 效果 图 


12.3.4 表单 


HTML 中 采用 <form> 标 签 插入 表单 .Bootstrap CSS 中 通过 一 些 简单 的 HIML 标记 和 扩 
展 的 类 创建 出 不 同样 式 的 表单 。Bootstrap 提供 了 下 列 类 型 的 表单 布局 : 牌 直 表单 (默认 )、 
水 平 表单 和 内 联 表 单 。 

1. 垂直 表单 

Bootstrap 中 默认 的 表单 是 垂下 表单 ， 即 表单 标记 在 控件 的 上 方 。 有 具体 步骤 如 下 : 

(1) 癌 父 <form> 元 素 添 加 role="form"。 

(2) 把 label( 标 签 ) 和 控件 放 在 一 个 禹 有 类 .form-group 的 <div> 中 。 这 是 设 定 最 佳 间 


距 所 必需 的 。 
(3) 回 所 有 的 文本 元 素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。 


【实例 12.12 】 使 用 Bootstrap CSS 中 设 定 午 和 直 表 单 ， 文 件 名 称 为 chapter12.12.html， 内 


容 如 下 : 
< IDOCTYEE htm > 
< 中 tLIm > 
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<head> 
<metla charset ="UTE 8 "> 
<title>Bootstrap 垂直 表单 </title> 
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 
<form role="form"> 
<div class="form-—group"> 
<label for="name"> 姓 名 </label> 
<inpuat tye—"text™ class="form control" id—"name"™" placeholder=" 证 秩 
入 名 称 "> 
GT 
<div class="form-group"> 
<label for-"inputfile"> 目 我 介绍 </1label> 
<input type="file™" 1id="inputfile™> 
</d1liv> 
<div class="checkbox"> 
<1abe1> 爱 好 : </1label> 
<label><input type="checkbox"> 游 泳 </1abelL> 
<label><input type="checkbox"> 看 书 </1abel> 
<label><input type="checkbox"> 旅 游 </label> 


过 并 加 三 本 
<button type="submit"™ class="btn btn-default"3 提 交 </button> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.12.html， 页 面 效 果 如 图 12-16 所 示 。 
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图 12-16 ”Bootstrap CSS 中 设 定 垂 直 表 单 类 的 效果 图 
2 水平 表 音 
Bootstrap 中 水 平 表单 ， 设 定 表 单 中 label( 标 签 ) 和 控件 在 不 同 的 列 ， 通 过 为 <form> 标 记 
添加 类 class .form-horizontal 类 ， 为 label 标签 添加 类 .control-label 实现 。 实 现 的 步骤 如 下 : 


(1) 回 父 <form> 元 系 添 加 class .form-horizontal。 
(2) 把 标签 和 控件 放 在 一 个 市 有 class .form-group 的 <div> 中 。 
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(3) 回 标 俭 添 加 class .control-label。 
【实例 12.13】 使 用 Bootstrap CSS 中 类 .form-inline 设 定 水 平 表单 ， 文 件 名 称 为 
chapter12.13.html， 内 容 如 下 : 


<IDOCTYPE htmil»> 
<html> 
<head> 
<meta charseto—"UTF—8"»> 
<title>Bootstrap 水 平 表单 </title> 
<1link rel="stylesheet™ href="bootstrap—3.3.7-dist/css/bootstrap.mn.css"> 
</head> 
<body> 
<form class="form-—horizontal™" role="form™"> 
<div class="form-—group"> 
<label for—"firstnama” class—"col-sm 2 control label"> 包 </label> 
<!-- col-sm-3 指 的 是 12 栅 格 系统 中 在 小 屏幕 下 占 三 列 --> 
<div Class="col—sm9"> 
<!-- col-sm-2 指 的 是 12 栅 格 系统 中 在 小 屏幕 下 占 两 列 --> 
<input type="text™" class="form-—control™ id="fijrstname" 
placeholder=" 请 输入 名 字 "> 
本 > 
</Yd1LV> 
<div class="form-—group"> 
<label for="lastname™" class=”"col-sm-2 control-label™"> 娃 </label> 
<div Class—"col sm 9"> 
<!-- 屏幕 大 于 ( 宇 992px) ,使 用 col-mqd-*--> 
<input type="text" class="form-control™" id="lastname" placeholder=" 
请 输入 姓 "> 
</div> 
</d1iv> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.13.html， 页 面 效 果 如 图 12-17 所 示 。 
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12-17 ”Bootstrap CSS 中 设 定 水 平 表 单 类 的 页 面 效果 
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3. 内 联 表单 


Bootstrap 中 内 联 表 单 设 定 元 素 是 向 左 对 齐 的 ，label( 标 签 ) 是 并 排 的 ， 通 过 <form> 标 记 添 
加 class .form-inline 实现 。 在 默认 情况 下 , Bootstrap 中 的 input、select 和 textarea 有 100% 
宽度 。 在 使 用 内 联 表 单 时 ， 需 要 在 表单 控件 上 设置 一 个 宽度 。 
【实例 12.14 】 使 用 Bootstrap CSS 中 类 .form-inline 设 定 内 联 表单 ， 文 件 名 称 为 
chapter12.14.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 内 联 表单 </title> 
<link rel—"stylesheet™ href— "bootstrap 3.3.7-d1istycss/bootstrap-.min.css"y> 
</head> 
<body> 
<form class="form-—inline™"> 
<dly class="form-group"> 
<label for="name"> 姓 名 </label> 
<innat tyoe—"text" class—"fForm control" placeholder-" 衣 输入 名 称 "> 
< 
<div class="form-group"> 
<label> 自 我 介绍 </label> 
<input type="file™" class="form—control™> 


<tdiv> 
<d1ly Class="checkbhox™> 
<label> 爱 好 : </1label> 
<label><input type="checkbox"> 游 六 </label> 
<label><input type="checkbox"> 看 书 </1abel> 
<label><input type="checkbox"> 旅 游 </label> 
过 亲王 可 六 
<button type="submit™ class="btn btn-default"> 提 区 </button> 
</form> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.14.html， 页 面 效 果 如 图 12-18 所 示 。 


A 1 和 > 
1 六 Beotstrap 内 联 志 单 入 “和 


ba 可 名 127.0.0.1:8020/ 客 村 / 袜 例 /第 12 剖 /chapter12.14.html? 也 让 | 各 


请 输入 名 称 自我 介绍 “| 选择 文件 未 选择 任何 文件 爱好 : 目 游 泳 目 看 书目 旅游 ”提交 


图 12-18 ”Bootstrap CSS 中 使 用 表单 .form-inline 类 的 页 面 效果 


12.3.5 ”按钮 


Bootstrap 中 提供 了 一 些 选 项 来 定义 按钮 的 样式 ， 为 <a>、 
现 不 同 风格 的 按钮 ， 如 表 12-2 表示 。 下 面 样式 类 可 用 于 <a>、 
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<button> 标 记 添 加 了 类 .btn 呈 
<button> 或 <input> 元 素 显 示 


各 式 各 样 的 按钮 。 
主要 是 从 设 定 按钮 的 大 小 、 状 态 来 定义 不 同样 式 的 按钮 。 其 .btn 类 样式 属性 如 表 12-2 
所 示 。 
表 12-2 .btn 类 
类 描 述 

btn 为 按钮 添加 基本 样式 

.btn-default 默认 /标准 按钮 

ei 原始 按钮 样式 (未 被 操作 ) 

.btn-success 表示 成 功 的 动作 

.btn-info 该 样式 可 用 于 要 弹出 信息 的 按钮 

.btn-warnine 表示 需要 谨慎 操作 的 按钮 

.btn-danger 表示 一 个 危险 动作 的 按钮 操作 

btn-link 让 按钮 看 起 来 像 个 链接 (仍然 保留 按钮 行为 ) 

btn-lg 制作 一 个 大 按钮 

.btn-sm 制作 一 个 小 按钮 

.btn-xs 制作 一 个 超 小 按钮 

btn-block 块 级 按钮 ( 拉 伸 至 父 元 素 100% 的 宽度 ) 

.active 按钮 被 单 击 

disabled 休 用 按钮 


【实例 12.15】 使 用 Bootstrap CSS 中 类 .btn 设 定 按钮 ， 文 件 名 称 为 chapter12.15.html， 


内 容 如 下 : 
<lIDOCTYPE html> 
<html> 
<head> 
<meta charset=—="UIF 8"> 
<title>Bootstrap 按钮 </title> 
<link rel="stylesheet™ href—="bootstrap-—3.3.7-dist/css/bootstrap.min.css"> 
</head> 
<body> 


<! 一 默认 的 标准 按钮 --> 


<button type="bputton™ class="btn btn-defaultn"> 默 认 技 钮 </button> 


<1-- 原 始 按钮 样式 (未 被 操作 ) --> 


<button type="buttonn class="btn btn-primary"> 原 始 按钮 </button> 


<1-- 表示 一 个 成 功 的 或 积极 的 动作 --> 
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<button type—"button™ class-—"btn btn=saccess” > 成 功 控 钵 < /batton> 
<! 一 -警告 消息 的 上 下 文 按钮 --> 
<button type="button™ class="btn btn-info"> 信 息 按 钮 </button> 
<!-- 谨 慎 采 取 的 动作 --> 
<button type="button™ class="btn pbtn-warning"> 和 警告 按钮 </button> 
<! 一 -一 个 危险 的 或 潜在 的 负面 动作 --> 
<button type="button™” class="btn btn-danger"> 人 危险 按钮 </button> 
<1-- 一 个 链接 按钮 的 行为 --> 
<button tyYpe="buttonr class="btn btn-link"> 链 接 按 钮 </button> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.15.html， 页 面 效 果 如 图 12-19 所 示 。 


7 | 口 Bootstrap 按 钥 其 bY \ 


COIDO 127.0.0.1:8020/ 教 材 / 宇 例 /第 12 章 /chapter12.15.html| 


对 认 技 旨 本 | 


图 12-19 ”Bootstrap CSS 中 使 用 .btn 类 按钮 的 页 面 效果 


Sa 12.4 使 用 Bootstrap 布局 组 件 


Bootstrap 工具 包 提 供 了 用 来 创建 固定 布局 和 流动 布局 的 组 件 。 组 件 的 种 类 很 多 ， 本 节 主 
要 介绍 Bootstrap 常用 的 几 种 组 件 , 有 具体 如 下 : Bootstrap 按钮 下 拉 亲 单 、 Bootstrap 字体 图 标 、 
按钮 组 、Bootstrap 输入 框 组 、Bootstrap 导航 栏 、Bootstrap 分 页 、Bootstrap 进度 条 、Bootstrap 


敬告 和 Bootstrap 多 媒体 对 象 等 。 


12.4.1 ”Bootstrap 字体 图 标 


Bootstrap 字体 图 标 是 在 Web 项 目 中 使 用 的 图 标 字 体 。Bootstrap 提供 了 200 多 种 字体 
格式 的 字形 ， 用 户 可 以 通过 基于 项 目的 Bootstrap 类 来 使 用 这 些 图 标 。Bootstrap 提供 的 字 
体 图 标 在 fonts 文件 夹 内 ， 相 关 的 CSS 规则 写 在 dist 文件 夹 内 的 css 文件 夹 内 的 


bootstrap.css 和 bootstrap-min.css 文件 上 。 它 主要 包含 了 下 列 文 件 : 
(1) glyphicons-halflings-reeular.eot 
(2) glyphicons-halflings-reeular.sveg 
(3) glyphicons-halflnmgs-reeular.ttf 
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(4) glyphicons-halflings-reeular.wotf 
【实例 12.16 】Bootstrap CSS 中 使 用 类 .Glyphicons 获取 菜 些 图 标 ， 文 件 名 称 为 
chapter12.16.html， 内 容 如 下 : 


<IDOCTYPE. html> 
<html> 
<head> 
<meta Charset=—"UrF 8"> 
<title>Bootstrap 图 标 </title> 
<1link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.mn.css"> 
</head> 
<body> 
<span class="glyphicon glyphicon-~arrow-up"></span> 
<button type="button™ class="btn btn-default™"> 
<span class="glyphicon glyphicon-—sort-by-attributes"></span> 
</button> 
<span class="glyphicon glyphicon-adjust"></span> 
<span class="glyphicon glyphicon-user"></span> 
<button type="button™" class="btn btn-primary btn—lg" style= 
"font-size: 20px;"> 
<! 一 -通过 增加 或 减 小 图 标的 字体 尺寸 ， 您 可 以 让 图 标 看 起 来 更 大 或 更 小 。--> 
<span class="glyphicon glyphicon-—user"></span>User 
</button> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.16.html， 页 面 效 琳 


y [四 Bootstrap 图 标 x WW 


! 
OS 有 


CO © 127.0.0.1:8020/ 教 材 /实例 /第 12 童 /chapter12.16.html 岛 去 
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12.4.2 ”Bootstrap 按钮 下 拉 荣 音 


Bootstrap 按钮 下 拉 荣 单 组 件 ， 主 要 包括 标签 、 对 齐 方 式 和 按钮 的 状态 等 内 容 。 
使 用 Bootstrap class 按钮 添加 下 拉 菜 单 , 可 以 通过 与 下 拉 菜 单 (Dropdown)jquery 插件 的 
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互动 来 实现 ， 同 时 使 用 <span class="caret"></span> 来 指示 按钮 作为 下 拉 且 单 。 下拉 采 单 涉 


及 的 类 如 表 12-3 所 示 。 
表 12-3 .Dropdown 类 
类 摘 述 
.dropdown 指定 下 拉 菜 单 ， 下 拉 菜 单 都 包 襄 在 .dropdown 里 
.dropdown-menu 创建 下 拉 菜 单 
.dropdown-menu-right 下 拉 某 单 右 对 齐 
.dropdown-header 在 下 拉 菜 单 中 添加 标题 
.dropurp 指定 则 上 弹出 的 下 拉 菜 单 
.disabled 下 拉 沫 单 中 的 人 禁用 项 
.divider 下 拉 沫 单 中 的 分 割 线 
.disabled 禁用 按钮 


【实例 12.17 】 使 用 Bootstrap CSS 中 类 .Dropdowns 设置 下 拉 菜 单 ， 文 件 名 称 为 
chapter12.17.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta Charset=" OF 8"> 
<title>Bootstrap 下 拉 某 单 (Dropdowns) </title> 
<]11TK rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
<scCript src="Jquery—3.3.1/ query—3.3.1 .min.Js"></script> 
<script src="bootstrap— 3.3.171-—disty]js/bootstrap.min.Js"></script> 
</head> 
<body> 
<div Class="dropdown"™"> 
<button type="button™" class="btn dropdown-toggle™" id="dropdownMenul™" 
data-toggle=nrdropdownn> 研 究 方 阿 
<span class="caret"></span> <1-- 指 示 该 按钮 有 下 拉 选 项 --> 


</button> 
<ul class="dropdown—menu" role="menu" aria-labelledby="dropdownMenu]l"™"> 
让 
es 3 
<i11% 
全 直系 
<a role—"menuitem" tabindex= 1 hreE= 叶 ”> 数据 控 气 </a> 
Sa 
2 肝 
“a rdle="menuitem™" tabindex="_—1™" href="#"> 人 工 尖 能 </as 
< 11> 
<11 class="divider"></1i> <!-- 人 分割 线 -> 
< 
“a ole—"nennitem" tabindez—™]™ hret= nyJava 程序 设计 </a> 
Sl 
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</ul> 
</dliv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.17.html， 页 面 效 果 如 图 12-21 所 示 。 


| # 中 Bootstrap 下 近 党 单 (Dr X ， :证 


| (2 全 | 加 127001:8020/ 政 村 /实例 /第 12 音 /chapter 全 六 | 恺 
”研究 方向 ~ 
大 数据 


数据 挖掘 
人 工 智能 


Java 程 友 设 计 


| 
12-21 ”Bootstrap 中 设置 按钮 下 拉 菜 单 的 页 面 效 果 


12.4.3 ”Bootstrap 按钮 组 


Bootstrap 按钮 组 主要 包括 基本 按钮 组 、 工 有 具 栏 按钮 组 和 垂直 按钮 组 等 。 

1. 基本 按钮 组 

【实例 12.18 在 Bootstrap 中 使 用 类 .btn-group 设置 基本 按钮 组 ， 文 件 名 称 为 
chapter12.18.html， 内 容 如 下 : 


<1IDOCTYPE html> 
<htmil> 
<head> 
<meta charset="UITF= 8"> 
<title>Bootstrap 基本 按钮 组 </title> 
<link rel="stylesheet™" href—="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
<sCript src=" query 3.3.1/ 90ery 3-.3.1.min.1s5"></script> 
<script src="bootstrap 3.3.7-dist/Js/bootstrap.min.J]s"></script> 
</head> 
<body> 
<dlv class="btn-group"> 
<button type="button" class="btn btn-default">btn 按钮 1</button> 
<button type="button" class="btn btn-default">btn 按钮 2</button> 
<button type="button" class="btn btn-default">btn 按钮 3</button> 
</d1iv> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter12.18.html， 页 面 效果 如 图 12-22 所 示 。 


) 品 Bootstrap 基 本 按 4 组 x WW 


GO Ee, 127.0.0.1:8020/ 骆 材 /实例 /第 12 章 /chapter12.18... 久 个 
btn 技 钮 1 | btn 技 钮 2 ”btn 按 馈 3 


图 12-22 ”Bootstrap 中 基本 按钮 组 


2. 工具 栏 按 钮 组 


【实例 12.19】 在 Bootstrap 中 使 用 类 .btn-toolbar 设置 工具 栏 按钮 组 ， 文 件 名 称 为 
chapter12.19.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 工具 栏 按 钮 组 </title> 
<link rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.mn.css"> 
<scCript sre—™"™ query 33.1790ery 33.1mIin Ss"></sCript> 
<Script src="bootstrap-3.3.7-dist/js/bootstrap.min.]s"></script> 
</head> 
<body> 
<d1V class="btn-toolbar™ role="toolbar™"> 
<div class="btn-group"> 
<button type="button" class="btn btn-default"> 按 钮 1</button> 
<button type="button™"™ class="btn btn-default"> 按 钮 2</button> 
<button type="button™" class="btn btn-dqefaultn> 按 钮 3</button> 
</d1lv> 
<div class="btn-group"> 
<button type="button™" class="btn ptn-default"> 按 钮 4</button> 
<button type="button™" class="btn btn-defaultn> 按 钮 5</button> 
<button type="button™" class="btn btn-qefaultn"> 按 钮 6</button> 
</div> 
<div class="btn-—group"> 
<button type="button™" class="btn btn-default"> 按 钮 7</button> 
<button type="button™" class="btn btn-defaulLt"> 按 钮 8</button> 
<button type="button™" class="btn btn-defaultn> 按 钮 9</button> 
div> 
</div> 
</body> 
</html> 
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在 浏览 器 中 打开 网 页 文件 chapter12.19.html， 页 面 效 果 如 图 12-23 所 示 。 


BF 中 一 口 其 
/DD bootstrap 工 RE 组 x 和 \ 


| @ 127.00.1:8020y 教 材 /实例 /第 12 剖 /chapter12.19.html 各 古 [和 音 | 


按钮 1 按钮 2 | 按钮 3 按钮 4 按钮 5 ， 按 针 6 按钮 7 按钮 8 | 按钮 9 


12-23 ”Bootstrap 中 工具 栏 按钮 组 
3. 垂直 按钮 组 


【实例 12.20】 在 Bootstrap 中 使 用 类 .btn-group-vertical 设置 垂直 按钮 组 ， 文 件 名称 为 
chapter12.20.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF 8"> 
<title>Bootstrap 和 焉 百 按钮 组 </tit1Le> 
<link rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
tript. SPTeE=" Ouery S31 ry 3.3.1 mn To" > scripe 
<SscCript src="bootstrap—3.3.7-—dist/jJs/bootstrap.min.Js"></script> 
</head> 
<body> 
<div class="btn-—group—vertical™> 
<button type="button™" class="btn btn-default"> 按 钮 1</button> 
<button type="button™ class="btn btn-default"> 按 钮 2</button> 
<div class="btn-group—vertical™> 
<button type="button” class="btn btn-default dropdown-toggle" 
data-toggle="dropdown"> 下 拉 
<span class="caret"></span> 
</button> 
<Ul class="dropdown—menu™ > 
<11i3xa Dref=""S 下 拉链 按 1<7a3<711S 
<1i><a href="#"> 下 拉链 接 2</a></1i> 
</ul> 
</d1liv> 
</d1liv> 
</body> 
<“/{hitml> 


在 浏览 器 中 打开 网 页 文件 chapter12.20.html， 页 面 效 果 如 图 12-24 所 示 。 
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y 加 Bootstrap 芋 让 控 馈 组 wr 出 


Ns 
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下 拉链 接 1 
下 拉链 接 2 


图 12-24 ”Bootstrap 中 垂直 按钮 组 


12.4.4 ”Bootstrap 输入 框 组 


Bootstrap 输入 框 组 来 目 表 单 控 件 。Bootstrap 输入 框 组 ， 可 以 实现 在 文本 的 输入 框 前 或 
者 后 添加 文本 或 按钮 作为 前 缀 和 后 缀 。 即 通过 问 .form-control 添加 前 绥 或 后 绥 元 素 ,， 把 六 绥 
或 后 组 元 素 放 在 一 个 市 有 类 .input-group 的 <div> 中 , 并 且 在 相同 的 <div> 内 ， 添 加 一 个 
具有 类 .input-group-addon 的 <span> 元 素 ， 把 该 <span> 放置 在 <input> 元 素 的 前 面 或 者 
后 面 即 可 。 
【实例 12.21】 使 用 Bootstrap 中 使 用 类 .btn-group-vertical 设置 输入 框 组 ， 文 件 名 称 为 
chapter12.21.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF— 8"> 
<title>Bootstrap 输入 框 组 </title> 
<link rel="stylesheet™" href—="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
<acCript srec="|query 3.3.1/19uery 3.3.1 .min.13" ></script> 
<scCript src="bootstrap-3.3.7-d1istys/bootstrap-.min.]Js"></scripty> 
</head> 
<body> 
<dliv style="padding: l00px 100px 1l10px; "> 
<form class="bs-example bs-example-form”" role="form"> 
<div class="input—-group"> 
<span class="input-group-addon">¥ </span> 
<input type="text™" class="form-—control" 
placeholder="twitterhandle"> 
人 > <br> 
<div C1ass=n"1LnpuUt-9Foup"> 
<input type="text™" class="form-control"> 
<span class="input-group-addon">ZAt</span> 
</divS> 
</form> 
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</d1liv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.21.html， 页 面 效 果 如 图 12-25 所 示 。 


y [| Beoctstrap 输 入 框 组 X \\ \ 
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12-25 ”Bootstrap 中 输入 框 组 


12.4.5 ”Bootstrap 导航 栏 


导航 栏 是 网 站 的 一 个 重要 部 分 。 Bootstrap 网 站 中 导航 栏 可 以 设置 为 折 攻 的 3 也 可 水 平 
展开 ， 针 对 不 同类 型 寻 航 栏 的 要 求 可 辅助 设置 相应 的 样式 。 

Bootstrap 导航 栏 组 件 使 用 navbar 类 实现 。 创 建 一 个 默认 的 导航 栏 ， 可 以 癌 <nav> 标 记 
添加 class 类 .navbar、.navbar-default 即 导 航 栏 默 认 格式 ， 这 加 role="navigation"， 同 时 <div> 
元 际 谎 加 一 个 标题 class 类 .navbar-header， 并 且 添 加 市 有 class 类 .nav、.navbar-nav 的 无 序列 
表 。 为 了 实现 同 叶 航 栏 的 链接 ， 可 通过 在 内 部 添加 <a> 元 系 并 设置 市 有 类 .navbar-brand。 具 
体 看 如 下 实例 。 

【实例 12.22】 在 Bootstrap 中 使 用 .navbar 类 设置 导航 栏 ， 文 件 名 称 为 chapter12.22.html， 
内 容 如 下 : 
<1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF- 8"»> 
<title>Bootstrap 导航 栏 </title> 
<link rel="stylesheet™" href—="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
aorit sre=" query3.3.17 mery 3.3.1 mn.s" >/ acript> 
<sScCript src="bootstrap—3.3.7-dist/jJs/bootstrap.min.]Js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default™" role="navigation™> 


<div Class="container— fluid™y 
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<div class="navbhar-header™> 
<a class="navbar-brand" href="#">Web 前 端 开发 教程 </a> 
</d1liv> 
<dliv> 
<ul class="nNav navbar-nav"> 
11 ClaSss "dctive"r ea ret="P"S 人 太岁 面 设 守之 /a2/11iS 
<1iy<a href="#"> 客 户 油 脚本 开发 </ay</1iS 
<]11 class="dropdown"> 
<a href="#" class="dropdown-toggle™" data-toggle="dropdown™"> 
Web 前 端 开 发 
<b class="caret"></b> 
i 
<uUl1 class="dropdown—menu™> 
<li><a href="#">SHTML5</a></11> 
<]li><a href="#">CSsSs</a></11> 
<11 Class="divider"></11> 
<li><a href="#">JavaSscript</a></11> 
<11 Class="divider"></11> 
<l1i><a href=—"4">BRootstrap</a></11> 
</ul> 
</11> 
<fnl> 
</dliv> 
</d1liv> 
</navy> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.22.html， 页 面 效 果 如 图 12-26 所 示 。 


py 门 Bootstrap 导 航 栏 


GG 全 | 人 @ 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /chapter12.22... 所 人 | 
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图 12-26 ”Bootstrap 中 使 用 导航 栏 的 页 面 效果 
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12.4.6 ”Bootstrap 分 页 


Bootstrap 的 分 页 组 件 ， 使 用 class 类 .Pagination 实现 。 一 般 分 两 种 分 页 : 标准 分 页 和 翻 
由 分 贝 。 


【实例 12.23】 在 Bootstrap 中 使 用 类 .Pagination 设置 标准 分 页 功能 ， 文 件 名 称 为 
chapter12.23.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta Charset=—="UTF 8"> 
<title>Bootstrap 标准 分 页 </title> 
<link rel="stylesheet™" href="bootstrap-—3.3.7-dist/css/bootstrap.min.css"> 
<aeritt STC "Ory 3.3.1T9rYy 3.3.1.mnin.15" /acript> 
<sScCript src="bootstrap—3.3.7-—dist/jJs/bootstrap.min.Js"></script> 
</head> 
<body> 
<ul class="paginatlion™"> 
<11><a href="#">&laquo;</a></1i> <!-- 符 号 《 --> 
<li><a href="#">1</a></11> 
<liy<a href—"#">2</a><y 11> 
iven hret "Saal 
<li><a href="#">4</a></11> 
<liyxa href—"#">I</a>< 11> 
<11><a href—"#">&traquo;</a></1i> <!-- 符 号 少 =-> 
</ul> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.23.html， 页 面 效 果 如 图 12-27 所 示 。 


FT 
四 Bootstrap 标 准 分 页 x Ww 


图 12-27 ”Bootstrap 中 设置 标准 分 页 的 页 面 效果 
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2. 翻 页 分 页 


Bootstrap 翻 页 分 页 ， 指 的 是 “前 一 页 ”和 “后 一 页 ”形式 。Bootstrap 使 用 .Pagination 
类 实现 ， 可 结合 类 .disabled、.active 设 定 禁用 和 激活 的 状态 。 
【实例 12.24】 在 Bootstrap 中 使 用 .Pagination 类 设置 标准 分 页 功能 ， 文 件 名 称 为 
chapter12.24.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF 8™"> 
<title>Bootstrap 翻 幢 分 页 </title> 
<link rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
qrirt Sro—" ery 3.3.1 mrYy 33.42.1 .mn ">< /ocrint> 
<script src="bootatrap 3.3.1-dist/5/bootstrap.min.Js"y</script> 
</head> 
<body> 
<ul class="pagination™.> 
<1i><a href="#">&laquo;</a></11> 
1 Tlass— "active "ya hroef="t">te /a 11> 
<11 class="disabled"><a href="#">2</a></11> 
<1ix<a ref "S33ary xTib<a href—"t "Ad</ay< /1 
<119<a href "4"S>5</aS</IiS 
<li><a href="#">&raqguo;</a></11> 
<ful> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.24.html， 页 面 效 果 如 图 12-28 所 示 。 
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图 12-28 ”Bootstrap 中 设置 翻 页 分 页 的 页 面 效果 


12.4.7 ”Bootstrap 进度 条 


Bootstrap 进度 条 组 件 用 于 展示 加 载 、 跳 转 等 动作 执行 中 的 状态 ， 使 用 Bootstrap class 
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类 、.Progress、.progressbar。 
【实例 12.25】 在 Bootstrap 中 使 用 .Progress 类 设置 默认 的 进度 条 ， 文 件 名 称 为 
chapter12.25.html， 内 容 如 下 : 


<lIDOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 进度 条 </title> 
<link rel="stylesheet"™ href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
<sScript src="query—3.3.1/ query— 3.3.1.min.1s"></script> 
<Script src="bootstrap-3.3.7-dist/js/bootstrap.min.]s"></script> 
</head> 
<body> 
<dliyv class="progress"> 
<div class="progress-bar™. role="progressbar™. arla-Vvaluenow="60" 
aria—-valuemin="0"™ aria—valuemax="100"™" style="width: 40%;"> 
</d1liv> 
</dlv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.25.html， 页 面 效 果 如 图 12-29 所 示 。 


i 


”器 Bootstrap 进 度 条 x VW 
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图 12-29 ”Bootstrap 中 使 用 进度 条 的 页 面 效 果 


【实例 12.26】 在 Bootstrap 中 使 用 .progress 类 和 .progress-striped 类 创建 一 个 条 纹 进 度 
条 ， 文 件 名 称 为 chapter12.26.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 条 纹 进度 条 </title> 
<link rel="stylesheet™ href="bootstrap-—3.3.7-dist/css/bootstrap.min.css"> 
<scCript src="query= 3.3.1/ 疾 guery 3.3.1 .min.]s"></scripty> 
<SCript src="bootstrap-3.3.7-dist/Js/bootstrap.min.Js"></script> 
</head> 
<body> 


<div class="progress progress—striped"> 


HTML5+CSS3+JavaScript 网 页 设计 实用 教程 


<div Cl1ass="progress-bar progress-bar-success™”" role="progressbar" 
ar1a-Valuenow="60" aria—-valuemin="0" aria-valuemax="100" 
style="width: 60%;"> <!-- 表 示 进 度 条 在 60% 的 位 置 , 即 60$ 成 功 。--> 
</d1lv> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.26.html， 页 面 效 果 如 图 12-30 所 示 。 


1 [ Bootstrap 条 条 x 
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12-30 ”Bootstrap 中 使 用 条 纹 进度 条 的 页 面 效果 


12.4.8 ”Bootstrap 警告 


Bootstrap 中 的 警告 是 指 同 用 户 提供 了 一 种 定义 消息 提示 的 方式 。 
【实例 12.27】 在 Bootstrap 中 使 用 .alert、.alert- success、.alert -info、.alert-warning、 
.alert-danger 类 创建 不 同 的 警告 信息 ， 文 件 名 称 为 chapter12.27.html， 内 容 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bootstrap 警告 </title> 
<link rel="stylesheet™" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
< Corint Sr "Ory 33.10ery 3063. 1mn "eeripti> 
<SCript src="bootstrap-3.3.7-dist/Js/bootstrap.min.]Js"></script> 
</head> 
<body> 
<div class="alert alert-successn> 提 交 成 功 ! </div> 
<div class="alert alert-intfo"> 请 大 家 注意 信息 ! </div> 


<divy Class="alert alert-warning"> 和 警告! 请 不 要 ..... <div> 
<div class="alert alert-danger"> 错 误 ! 请 修改 。</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.27.html， 页 面 效 果 如 图 12-31 所 示 。 
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一 一 心 一 口 其 
六 BaeatstraP 莹 告 时 ™ < 
避让 加 12700.18020/ 芳 材 / 详 例 /第 12 章 /chapter1227.html & 家 | © 
] 看 
日 =i= 此 
提交 成 功 ! 


清 大 家 注意 信息 ! 


警告 ! 请 不 要 .… 


图 12-31 ”Bootstrap 中 设置 警告 信息 的 页 面 效 果 


12.4.9 Bootstrap 多 媒体 对 象 


Bootstrap 中 的 多 媒体 对 象 ， 主 要 是 图 片 、 视 频 和 首 频 等 。Bootstrap 中 提供 .media 
类 、.media-list 类 设置 文字 与 图 片 、 视 频 和 音频 等 媒体 对 象 之 间 的 排版 。 
【实例 12.28 】 使 用 Bootstrap 中 的 .media 类 和 .media-list 类 设置 多 媒体 对 象 ， 文 件 名 称 
为 chapter12.28.html， 内 容 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<meta Charset="UTF 8"> 
<title>Bootstrap 多 妨 体 </title> 
<link rel="stylesheet™ href—="bootstrap—3.3.7-dist/css/bootstrap.mn.css"> 
<sScript src=" query—3.3.1/query—3.3.1 .min.]s"></script> 
<script src="bootstrap-3.3.171-d1ist/js/bootstrap-min.]Js"></script> 
</head> 
<body> 
<diyv class="media"> 
<a Class—"media—left™ href="#"> 
<1img class="media—-object™ src="img/chun]jie.Jpg" height="]100px" 
width="100px"> 
</a> 
<div class="media—body"> 
<h4 class="media-heading"> 春 节 </h4> 
春节 古 时 叫 元 且 。 元 者 始 也 ， 旦 者 晨 也 ， 元 旦 即 一 年 的 第 一 个 早晨 。《 和 尔 雅 》， 对 “年 ”的 广 解 是 : 
“和 夏 日 岁 ， 商 日 祀 ， 周 日 年 。” 每 年 的 开始 从 正月 朔 日 子夜 算 起 ， 叫 “ 元 旦 ”或 “元 日 ”。 农 历年 的 
习俗 就 一 直流 传 下 来 。 
<dily class="media"> 
<a Class="media—left™" href="#"> 
<img class="media-object"™" src-="img/chunjie.jpg”alt=" 巡 体 对 
象 " height="100px" width="100px"> 
</a> 
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<div C1ass="med1a-body"> 
<h4 class="media-heading"> 春 P</h4> 

在 我 国 古 代 的 不 同 历史 时 期 春节， 有 着 不 同 的 含义 。 在 汉代 ， 人 们 把 二 十 四 节气 中 的 “立春 ”这 一 
天 定 为 春节 。 南 北朝 时 ， 人 们 则 将 整个 春季 称 为 春节 。1911 年 ,辛亥 音 命 推翻 了 清朝 统治 , 为 了 “ 行 
夏 历 ， 所 以 顺 农时 ， 从 西历 ， 所 以 便 统计 ”， 各 省 都 督 府 代表 在 南 泵 召开 会 议 ， 决 定 使 用 公历 。 这 样 
就 把 农历 正月 初 一 定 为 春节 。 至 今 ， 人 们 仍 沿用 春节 这 一 习惯 称呼 。 

<fdiv> 

</d1liv> 
</divy> 
</div> 
</body> 

</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.28.html， 页 面 效 果 如 图 12-32 所 示 。 
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解 星 :“ 夏 日 岁 ， 商 日 礼 ， 周 日 年 。 每 年 的 开始 从 正月 尹 日 子夜 算 起 ， 叫 元旦 或 元 日 "。 农 
历年 的 习俗 硫 一 是 流 仿 下 来 . 


春 方 

在 我 国 古 代 的 不同 历史 时 期 ， 春 节 ， 有 看 不 同 的 台 祥 。 在 议 代 ， 人 们 把 一 
十 四 节气 中 的 " 业 春 "这 一 天 定 为 春节 。 南 北朝 时 ， 人 们 则 将 整个 春季 称 为 才 
节 。1911 年 ， 辛 玄 革 命 推翻 了 请 朝 统 治 ， 为 了 ' 行 夏 历 ， 所 怖 农时 ， 从 西 
历 ， 所 以 便 统 计 "， 各 省 都 督 府 代表 在 南京 召开 会 议 ， 决 定 使 用 公历 。 这 样 
就 把 农历 正月 初 一 定 为 春节 。 圣 邻 ， 人 们 仍 吝 用 春节 这 一 习惯 称呼 。 


12-32 ”Bootstrap 中 多 媒体 的 页 面 效 果 


SS 12.5 Bootstrap 插件 


Bootstrap 目 市 十 儿 种 jQuery 插件 ,扩展 了 Bootstrap 布局 组 件 功能 。 该 插件 为 Bootstrap 
网 站 用 户 界 面 增添 了 交互 性 。 使 用 BootstrapJQuery 插件 ， 需 要 添加 插件 的 库 文 件 压 缩 包 。 


12.5.1 ”下拉 菜单 


在 上 一 节 内 容 中 ， 已 对 Bootstrap 下 拉 末 蛙 布局 组 件 做 了 介绍 ， 而 本 节 介 绍 的 下 拉 玉 早 
(Dropdowm) 插 件 实 现 对 沫 单 操作 的 功能 ， 可 以 加 任何 组 件 ( 比 如 导航 栏 、 标 俭 员 、 按 钮 等 ) 
添加 下 拉 这 单 ， 下 拉 束 单 是 可 切换 的 ， 通 过 与 JavaScript 插件 的 互动 来 实现 ， 下拉 有 亲 单 切换 
有 一 个 简单 的 方法 用 来 显示 或 隐 猎 下拉 某 单 ， 即 $().dropdown('toggle')。 

【实例 12.29】 使 用 Bootstrap 插件 ， 实 现 导 般 栏 内 的 下 拉 六 时 切换 ， 文 件 名 称 为 
chapter12.29.html， 内 容 如 下 : 


<IDOCTYPE html> 
<html> 
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<head> 
<meta charset=—="UTF—8"> 
<title>Bootstrap 插件 下 拉 莱 单 </tit1le> 
<11nK Frel="stylesheet"” href="bootstrap-3.3.7-dist/css/bootstrap.mn.css"> 
eri SPE" ry 3.3 TrYy 3.3.1.0m. "Ye erint> 
<SCript src="bootstrap—3.3.7-dist/jJs/bootstrap.min.J]s"></script> 
</head> 
<body> 
<nav Class="navbar navbar-default™" role="navigation"> 
<dliyv class="container-fluid"™"> 
<div class="navbar-header"> 
<a Class="navbar-brand" href="#"> 计 算 机 技术 </a> 
</Hdiv> 
<div lid="myexample"> 
<Ul class="nav navbar-naV > 
<11 class——"artivwe"><a href—"#" Mn a 11S 
<1iy<a href e "4" 发 展 趋势 zj/ay<y11i> 
<11 class="dropdown"><a href="#" class="dropdown—toggle" 
data-toggle="dropdown"> 研 究 方 同 <b class="caret"></b></a> 
<ul class="dropdown—menu"> 
<1i><a id="action-1" href="#"> 区 块 链 </a></1i> 
<113<a heef "m3 人 人 人工 各 能 ZA/a></711> 
li EL 
<11 class="divider"></]11> 
<]1i><a href="#">Java</a></11> 


</ul> 
<HE1S 
</ul> 
</div> 
</d1iv> 
</nav> 
<Sscript> 


<! 一 页 面 加 载 时 注册 下 拉 沫 单 --> 
$s (function()t 
/ /默认 显示 
5{".dropdown-toggle") .dropdown ('toggle'); 
}); 
<{acript> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.29.html， 页 面 效 果 如 图 12-33 所 示 。 
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站 Bootstrap 活 件 下 拉 茶 革 x 晤 上 
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图 12-33 ”Bootstrap 中 设置 下 拉 菜 单 的 页 面 效 果 


12.5.2 ”弹出 框 


Bootstrap 中 弹出 框 (Popover) 用 尸 只 需 把 鼠标 指针 巷 集 在 元 系 上 即 可 看 到 详细 人 信息。 如 
过 data 属性 : 如 需 添加 一 个 弹出 框 (popover)， 只 需 疝 一 个 锚 / 按 钮 标签 添加 
data-toggle="popover” 即 可 。 销 的 title 即 为 弹出 框 popoveD 的 文本 。 默 认 情 况 下 ， 插 件 把 
弹出 框 (popover) 设 置 在 项 部。 其 语法 格式 如 下 : 


<button type="button™ class="btn btn-primary Popover-shown" title="Popover 
title™" data-container="body" data-toggle="popover" 
data-content=" 请 巷 停 在 我 的 上 面 显 示 内 容 "> 
请 基 停 在 我 的 上 面 
</button> 


或 


<a href="#" data-toggle="popover™" title="Example popover"> 
请 若 停 在 我 的 上 面 


a 


【实例 12.30】 使 用 Bootstrap 插件 ， 实 现 弹 出 框 效 果 ， 文 件 名 称 为 chapter12.30.html， 
内 容 如 下 : 


<IDOoOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 深 动 效果 </title> 
<link rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
soript srec—"]query-3.3.1/ 站 90ery 3.3:1min.1S"></script> 
<script src="bootstrap--3.3.7-dist/jJs/bootstrap.min.]s"></script> 
</head> 
<body> 
<dilv clas="container™ style="padding: 1l100px 50PX lO0px;"™ > 
<button type="button™" class="btn btn-primary popover—-show" 
title="Popover title™" data-container="body" 
data-toggle="pPopover" 
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data-content=" 左 侧 的 Popover 中 的 一 些 内 容 show 方法 "> 
左 侧 的 Popover 
</button> 
<{dryv> 
<script> 
$ {function () { $("'.popover-show') .popover('show');}); 
$s (function (0 St -popover show') on("shoun bsspopover, Fonctaon {} 1 
alert (" 当 显 示 时 出 现 和 警告 消 晨 ")，; 
}) 
}); 
</stripts 
</d1liv> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.30.html， 页 面 效 果 如 图 12-34 所 示 。 
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图 12-34 ”Bootstrap 中 使 用 弹出 框 的 页 面 效 果 


12.5.3” 轮 播 


Bootstrap 轮 播 (Carousel) 插 件 是 一 种 灵活 的 啊 应 式 的 回 站 点 添加 滑 块 的 方式 。 如 果 要 单 
独 引 用 该 插件 的 功能 ， 那么 需 引 用 carouseljs。Bootstrap 插件 可 以 引用 bootstrapjjs 或 压缩 
版 的 bootstrap.min.js。 

何 单 的 图 片 幻 灯 片 ， 使 用 Bootstrap 轮 播 (Carousel) 插 件 显 示 了 一 个 循环 播放 元 系 的 退 
用 组 件 。 为 了 实现 轮 播 ， 只 需要 添加 市 有 该 标记 的 代码 即 可 。 只 需要 简单 地 基于 class 的 


开发 即 可 。 
【实例 12.31】 使 用 Bootstrap 插件 , 实现 图 厂 轮 播 效果 , 文件 名 称 为 chapter12.31.html， 
内 容 如 下 : 
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<1IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 轮 播 效果 </title> 
<link rel="stylesheet™ href="bootstrap-—3.3.7-dist/css/bootstrap.-.min.css"> 
“ooript sreo—"]oquery3.3.1/qery 3.3.1 .mn.15" ”></script> 
<sScript src="bootstrap—3.3.7-dist/jJs/bootstrap.min.Js"></script> 
</head> 
<div id="myCarousel™ class="carousel slide"> 
<1-- 轮 播 VCarousel) 指标 --> 
<Ol Class="carousel—indicators"> 
<]1 data-target="#myCarousel™" data-sl11de-to="0" class="active"></11> 
<11 data-target="#myCarouse]l"™" data-slide-to="1"></]11> 
<11 data-target="#myCarousel™" data-slide-—to="2"™></11> 
<fol> 
<!-- 轮 择 项 目 --> 
<d1V class="carousel—inner™"> 
<div class="item active"> 
<1mg src="img/imgl .JPG™ alt="First slide™ width="800px" > 
</dliv> 
<diy class="item"> 
<1mg Src="img/img2.JPG™ alt="Second slide™ width="800px"™” > 
</d1liv> 
<div class="item"™> 
<1img src="img/img3.JPG™" alt="Third slide™ width="800px" > 
</div> 
</div> 
l= 
<1- 一 轮 权 (Carousel}) 导 航 -> 
<a Class="]left carousel-control™ href="#myCarousel™ role="button" 
data-slide="prev"> 
<span class="glyphicon glyphicon-chevron--left" 
aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a Class="right carousel—control]™ href="#myCarousel™ role="button™" 
data-slide="next"> 
<span class="glyphicon glyphicon-chevron—right" 
aria-hidden="true"></span> 
<Span class="sr-only">Next</span> 
</a> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.31.html， 页 面 效 果 如 | 


中 12-35 所 示 。 
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图 12-35 ”Bootstrap 图 片 轮 播 页 面 效 果 


12.5.4 折 熏 


折 登 (Collapse) 搬 件 可 以 让 页 面 区 域 折 登 起 来 。 使 用 它 来 创建 折 有 登 寻 航 以 及 内 容 面 板 ， 
它 都 允许 有 很 多 内 容 选 项 。 要 单独 引用 该 插件 的 功能 ， 要 引用 collapse-js。 
【实例 12.32 使 用 Bootstrap 插件 , 实现 按钮 折 共 效果, 文件 名 称 为 chapter12.32.html， 
内 容 如 下 : 
<IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-—8"> 
<title>Bootstrap 折 番 效果 </title> 
<link rel="stylesheet™ href="bootstrap-3.3.7-dist/css/bootstrap.mn.css"> 
<script SEC=" query 3.3.1/query 3.3.1 .min.15"></script> 
<script src="bootstrap—3.3.7-dist/js/bootstrap.min.Js"></script> 
</head> 
<body> 
<div class="panel-group" id="accordion"> 
<div class="panel panel-default™"> 
<dlv class="panel-heading"> 
<h4 class="panel-title"™> 


<a data-toggle="collapse™" data-parent="#accordion" 
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href="#collapseone™"> 
单 击 我 进行 展开 ， 再 次 单 击 我 进行 折 登 。 第 1 部 分 
</a> 
</h4> 
</div> 
<div lid="collapseOne™" class="panel-collapse collapse in"> 
<div class="panel-body"> 
Nihil anlm keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt saplente ea proldent. Ad vegan excepteur butcher 


VICe lomo. 


</div> 
</div> 
</div> 
</body> 
</html> 


在 浏览 器 中 打开 网 页 文件 chapter12.32.html， 页 面 效 果 如 图 12-36 所 示 。 


六 Bootstrap 折 又 效果 x We 
GCG 合 |@ 127.0.0.1:8020/ 教 材 /实例 /第 12 章 /chapter12.32.html 


Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan 
excepteur butcher vice lomo 


12-36 ”Bootstrap 按钮 折叠 效果 图 


SA 12.6 回 到 工作 场景 


通过 12.2~12.5 节 内 容 的 学 习 , 已经 了 解 Bootstrap、Bootstrap 环境 安装 与 配置 `Bootstrap 
CSS 样式 类 、Bootstrap 布局 组 件 和 Bootstrap 插件 等 类 ， 和 苔 握 了 基本 Bootstrap 页 面 的 设计 。 
【工作 过 程 】 制 作 霖 购物 网 站 首页 部 分 模块 ， 页 面 效 来 如 图 12-37 所 示 。 
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秋装 上 新 
图 12-37 某 购 物 网 站 首页 的 页 面 效果 
首先 ， 构 建 总 体 构架 ， 其 具体 代码 如 下 : 


<dlv class="container™> 
<div Class="row Clearfix"> 
<dlvy class="col-—md—12 column"> 
<div class="Jumbotron™." style="background-image:url (img/top.Jpg); 
background-repeat: no-repeat; background-silze:Ccover; "> 
<nav class="navbar navbar-default™" role="navigation™"> 


<!-- 导航 栏 的 设计 --> 


</nav> 
</div> 
{Ary 
</div> 


<dlyv Class="row Clearfix™> 
<d1iy Class="col—md 12 column"™"> 
<div class="col-md-4 columnnm style="™width: 30%;"> <! 产品 类 别 --> 


</d1iv> 

<diy class—"col md-4 olumn" style="width: 40572>< 省 柱 轮 播 ==> 
</d1iv> 

diy class="col md 4 CDlamnn stvyLle="width: 30%"><4 用 户 人 信 息 --3> 
</div> 

< tdiv> 
<{dliv> 

</d1lv> 


其 次 ， 寻 航 栏 的 设计 ， 其 有 具体 代码 如 下 : 


<nav class="navbar navVvbar-default" role="navigation"> 
<diyv class="navbar-header"> 
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<button type="button™ class="navbhar-toggle™ data-toggle="collapse" 
data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle 
navigation</span><span class="icon-bar"></span><span 
class="icon-bar"></span><span class="icon-bar"></span></button> 
<a Class—"navbhar-brand™ href="#" 自 而 </a> 
</div> 
<div class="collapse navbar-collapse" 1d="bs-example-navbar-collapse-—1"> 
<Ul] class="nav navVvbar-naV > 
xi clases="active ea href— "PF">MWMMN<ay</ li> 
<1i><a href="#"> 折 旧 商 品 </a></1i> 
<1i Sa Dret— "9"3 福 册 <yaS</1i> 
<1i><a href="#"> 购 物 </a></1i> 
<11><a liref=" 只 "> 音 淖 购物 车 </Ba3</1i3S 
<1i><a href-"4"> 生 成 订单 </a><71i> 
li <a href="#"> 显 示 订 单 </a></1i> 
< > 
<form Cass= navbar-tormn navbhar—leit™” role="search"> 
<div class="form-—group"> 
<input type="text™" class="form-—control™ /> 
</div> <button type="submit" class="btn btn-default"> 查 询 </button> 
</form> 
</div> 
</nNnav> 


然后 ， 主 体 部 分 分 三 部 分 ， 为 左 、 中 、 右 ， 具 体 如 下 。 
左边 的 部 分 的 产品 分 类 代码 如 下 : 


<div class=—"col- md 4 colmm™" style—"wuith: 30%7"S 
<div class="]11ist-group"> 
< href—"#™ class— "list group item active"y 吓 类别 </ay 
<div class="]ist-group-item"> 女 六 </div> 
<diy class="]list-group-item"> 泗 </div> 
<div class="1ist-group-item"> 鞋 子 </div> 
<div class="1ist-group-item"> 家 居 用 品 </div> 
<div class="]ist-group-item"> 化 妆 用 上 师 </div> 
<div class="1ist-group-item"> 运 动 器 材 </div> 
i Clase—="List=qrom Titem"™ SACidivs 
<a Class="]list-group-item active"> 其 他 </a> 
</dliv> 
</div> 


中 国 的 广告 栏 约 灯 三 效果 代码 如 下 : 


“TV CT1aSS= 王 COL=mO 4 CO style—"width: 40%: > 
<div class="carousel slide™" id="carousel——505133"™"> 
<Ol class="carousel—indicators"> 
<11 data-slide-to="0"™" data-target="#carousel——505133"™></11> 
<11 aqata-sllde-to="1" data-target="#carousel—-505133"™></11> 
<11 qdata-sllde-to="2" data-target="#carousel——505133™ class= 
"active™> 
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</11> 
人 <OL> 
<dlv class="carousel—-inner"> 
<div class="carousel slide™" id="carousel-459062"> 
<Ol class="carousel—indicators"> 
<11 data—slide-to="0"™" data-target="#carousel—459062"™></11> 
<11 data-slide-to="1™" data-target="#carousel—459062"></11> 
<11 data—sltde to—"2" data target—"4carousel—459062" 
class="active"></11> 
xOl> 
<div class="carousel—inner™"> 
<div class="item active"> 
“md SrC="img/ 防 王 .jpg™ alt="First silide™ wiqdqth="30"™ > 
<dlv class="carousel—-caption"™> 
<h4 style="color:red"> 安 耐 果 安 热 沙 资生堂 </h4> 
“Idiv> 
</div> 
<div class="item™"> 
<img src-="img/ 秋 疙 .jpg" alt="Second slide™" > 
<div class="carousel—-caption™> 
<h4> 秋 装 上 新 </h4> 
人 <Iw> 
</div> 
<diy class="item™"> 
<1img src="img/computer.Jpg" alt="Third slide™ > 
<div class="carousel—caption"™> 
<h4> 笔 记 本 电脑 </h4> 
dv 
</div> 
</d1liv> 
<a class="left carousel-control" href="#carousel-459062"™" data-slide="prev"> 
<span class="™glyphicon glyphicon—chevron—left™></span></a> 
<a class="right carousel-control™" href="#carousel—459062™ data—-slide="next"> 
<span class="™glyphicon glyphicon—chevron—right"></span></a> 
cy> 
</d1iv> 
< /div 
</div> 


右 侧 的 登录 页 面 效 来 代码 如 下 : 


<div style="background-image:url (img/userlogin.Jpg) ;background-—repeat: 
no—-repeat;"> 
<table width="280™ height="135"™ border="0"™ cellpadding="0"™" cellspacing="0" 
background="img/systemImages/fg left01.jJpg" style="background-repeat: 
no—repeat™"> 
<form name="userform™ method="post™ > 
<tr height="25™" align="center"> 
<td height="5" align="center™" valign="middle"></td> 
<td align="center™" vallign="middle"></td> 
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全 了 二 下 入 
<tr align="center™"> 
<tqd width="129"™ height="25"™ allign="center"™" valign="middle"™> 
帐 &gnbsp; &nbsp; 与 : 
<Itd> 
<tqd width="]171"™" height="25"™ align="]eft™" valign="middle"> 
<input name="name™" type="text" size="17"> 
<i td 
</tr> 
<tr align="center"> 
<td height="25" aliqgn="center"™ valign-="middle"> 密 gnbsp; tnbsp; 公 ; </td> 
<td align="left"™" valign="middle"™"> 
<input name="password™ type="password™ slize="17"></td> 
</tr> 
<tr align="center"> 
<tqd height="25™ allign="center™ valign="middle™" colspan="3"> 
<inpat type—"submit™ value—m" 可 灾 " width—"51"™ height="20"> 
<input type="button™ valne=" 往 册 " width="51™ height=—="20"> 
<input type="button"” value=" 找 回 密码 " wiqth="51" height="20"™> 
</td> 
<itr> 
</form> 
</table> 
</d1iv> 
</d1iv> 
</div> 


12.7.1 训练 实例 


1. 训练 内 容 

自行 设计 如 图 12-38 所 示 页 面 ， 有 个 导航 条 固定 并 置顶 ， 它 始终 显示 在 页 面 顶 部 。 

2. 训练 目的 

> 掌握 Bootstrap 包 的 导入 。 

> 掌握 使 用 .navbar、navbar-inverse、navbar-fixed-top 类 来 设置 导航 栏 始 终 显示 在 顶部 。 
3. 训练 过 程 

参照 12.4.5 市 中 的 操作 步 又 。 


4. 技术 要 点 
使 用 .navbar、navbar-inverse、navbar-fixed-top 关 ， 注 意 导 航 栏 与 内 容 位置 
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Bootstrap 是 美国 Twitter 公 司 的 设计 师 Mark Otto 和 Jacob Thomton 合 作 基于 HTML、CSS、JavaScript 开发 的 简洁 、 直 观 、 强 怪 的 前 疯 
开发 框架 ， 使 得 Web 开发 更 加 快捷 。 [1] Bootstrap 提 供 了 优雅 的 HTML 和 和 CSS 规范 ， 它 即 是 由 动态 CSS 语 言 Less 写 成 。Bootstrap 一 径 
吊 后 晤 芝 欢 血 ， 一 直 是 GitHub 上 的 执 门 开源 项 目 ， 包 括 NASA 的 MSNBC (微软 全 国 广播 公司 ) 的 Breaking News 都 使 用 了 该 项 目 。 [2] 
国内 一 些 称 动 开 点 者 较为 就 于 4 的 丛 有 他 ， 如 WeX5R 有 者 并 源 框 亲 等 ， 也 是 其 二 Bootstrap 源 人 运 进 行 性 能 优 作 来。 


图 12-38 ”市 固定 并 置顶 的 导航 栏 的 页 面 效 果 


12.7.2 工作 实践 常见 问题 解析 


弟 见 问题 】 用 Bootstrap 中 的 .navbar、navbar-inverse、navbar-fixed-top 类 布局 设置 导 

航 始 终 显示 在 顶端 时 会 产生 一 些 问 题 ， 比 如 body 的 正文 的 顶部 内 容 会 被 导航 栏 盖 住 ， 如 何 
避免 呢 ? 

【 答 】 在 页 面 的 样式 表 ， 要 让 正文 顶部 下 移 ， 给 页 面 的 <body> 添加 style 的 属性 : 

<body style="padding-top:60px"> 
或 者 

body 

padding—top: 50px; 


overflow:hidden; 


} 


SS 12.8 本 章 小 结 


本 节 主 要 介绍 了 Bootstrap 框架 如 何 使 用 ， 从 Bootstrap 环境 的 安装 、Bootstrap CSS 样 
式 设 定 、Bootstrap 布局 组 件 的 设计 到 Bootstrap 插件 的 使 用 。 

使 用 Bootstrap CSS 样式 中 Bootstrap 的 排版 特性 ， 可 以 创建 标题 、 段 落 、 列 表 及 其 他 
内 联 元 素 。 

Bootstrap 布局 组 件 中 字体 图 标 提 供 了 200 多 种 字体 格式 的 字形 ， 通 过 改变 字体 尺寸 、 
颜色 等 进行 设置 图 标 ;， Bootstrap 布局 组 件 中 使 用 类 .btn-group 设置 控 钮 下 拉 有 六 单 ， 使 用 
<span class='"caret"></span> 来 指示 按钮 作为 下 拉 六 蛙 ; 导航 栏 组 件 使 用 .navbar 类 实 
现 。.Pagination 类 实现 分 页 功能 ; .Progress、.Proegressbar 类 实现 进度 条 功能 ; .Alert 类 实现 


党 告 功能 等。 


Bootstrap 自 带 了 很 多 jQuery 插件 ， 通 过 与 JavaScript 插件 的 互动 来 实现 一 些 弹出 框 、 
轮 播 、 折 一 等 功能 。 
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YX2 12.9 习 题 


、 单 项 选择 题 
1]. 在 Bootstrap 中 ， 以 下 的 ( ) 不 是 文本 对 齐 的 方式 。 
A. .text-lett B. .text-middle 
C. .text-right D. .text-justify 
2. 在 Bootstrap 中 ， 下 列 (  ”) 不 属于 验 Se 
A. .has-warning B. .has-error 
C. .has-danger D. .has-success 
3. ”在 Bootstrap 中 ， 下 列 (  ”) 不 属于 图 片 处 理 的 类 ， 
A. .Img-rounded B. .Imege-circle 
C. .Imge-thumbnail D. .Img-radlus 
二 、 填 空 是 
1. Bootstrap 使 用 类 来 获得 图 片 圆 角 ; 使 用 类 使 整个 图 片 变 
成 圆 形 。 
2. Bootstrap class 按钮 添加 下 拉 菜 单 ， 可 以 通过 与 下 拉 菜 单 (Dropdown)jQuery 插件 的 
互动 米 实 现 ， 同 时 使 用 <span class=" "></span> 米 指 示 按 钮 作为 下 拉 菜 单 。 
3. ”Bootstrap 的 分 页 组 件 ， 使 用 class 类 实现 。 一般 分 两 种 分 页 标准 分 页 


和 翻 页 分 页 。 

4. ”Bootstrap 轮 播 (Carousel) 插 件 是 一 种 只 活 的 响应 式 的 向 站 点 添加 滑 块 的 方式 。 如 果 
要 单独 引用 该 插件 的 功能 ， 那 么 需 引 用 , 

5. ”Bootstrap 进度 条 组 件 用 于 展示 加 载 . 跳 转 等 动作 执行 中 的 状态 ,使 用 Bootstrap class 


三 、 操 作 题 


创建 网 页 ， 文 件 名 为 ex12.1.html， 页 面 效 果 如 图 12-39 所 示 。 其 中 ， 单 击 搜狐 、 新 浪 、 
百度 ， 另 起 一 个 新 的 窗口 打开 对 应 的 主页 。 


eG ,pz 8020/ 教 材 /习题 /第 12 章 .QB 让 | : 


«| 搜狐 ， 新浪 百度 | > 


12-39 ”分 页 功能 效果 图 
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